All geek questions in one place

How do you make sure that a Vimeo video exists?

So, I'm trying to show a Vimeo video only if it exists. I am using the new JavaScript API.

According to their documentation, the event errorshould be fired when a video error occurs during loading. I suppose adding the wrong Vimeo video URL should also fire an event error.

This is what I did to get the event errorin action:

<iframe id="vimeo-player1" src="https://player.vimeo.com/video/13333693532?autoplay=0&amp;background=1" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>

Approach 1

player = new Vimeo.Player($('#vimeo-player1'));

player.on('error', function() {
    console.log('Error in loading video');
});

Approach 2

player = new Vimeo.Player($('#vimeo-player1'));

player.loadVideo().then(function(id) {
    console.log('loaded');
}).catch(function(error) {
    console.error(error);
});

None of them work. He never ran an error block.

Additional information (to help you win Bounty):

  • Requires a client solution (I do not have access to the server side of the portal)
  • Videos are hosted by third-party users.
+6
4

, , - API Vimeo, oEmbed:

function checkIfVideoExists(url, callback){
    $.ajax({
        type:'GET',
        url: 'https://vimeo.com/api/oembed.json?url=' + encodeURIComponent(url),
        dataType: 'json',
        complete: function(xhr) {
            console.log(xhr.status);
        } 
    });
}

checkIfVideoExists("https://vimeo.com/217775903", function(status){
    console.log(status); // 200 - OK
});

checkIfVideoExists("https://vimeo.com/234242343", function(status){
    console.log(status); // 404 - Not found
});

jsFiddle.

+1

: jsbin.com , , , .

, :

var element1 = document.querySelector('#player1');
var element2 = document.querySelector('#player2');

var player1 = new Vimeo.Player(element1);
var player2 = new Vimeo.Player(element2);

element1.onload = function (data) { onLoad(data, 1) }
element2.onload = function (data) { onLoad(data, 2) }

function onLoad(data, id) {
  if (data.target.dataset.ready === undefined) {
    alert("#" + id + " video does not exist");
    return;
  } 
  alert("#" + id + " it exists");
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://player.vimeo.com/api/player.js"></script>
</head>
<body>
<iframe id="player1" src="https://player.vimeo.com/video/215101645556" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
<iframe id="player2" src="https://player.vimeo.com/video/215101646" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</body>
</html>
Hide result
+1

http get, .

Jquery get:

$.get( "https://player.vimeo.com/video/13333693532?autoplay=0&amp;background=1")
.done(function() {
    alert( "success" );
})
.fail(function() {
    alert( "error" );
})
0

Vimeo API, endpoint, . Vimeo Playground

But, unfortunately, there is no JS SDK yet, you can use the Server-Side SDK before sending the page to the browser and check the video. exists, or you need to dive deep and write your own implementation on the client side and decide whether to show the user’s video or not.

0
source

Source: https://habr.com/ru/post/1017340/

More articles:


All Articles