How do you make sure that Vimeo video exist?

Asked 18/5, 2017 at 11:14 Answered 23/5, 2017 at 17:30

Solved javascript jquery vimeo vimeo-api

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

As per their documentation, error event should get triggered when a video face errors while loading. I believe, adding a wrong Vimeo video URL should also trigger the error event.

This is what I did to get the error event in 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 working. It never executed the error block.

Some Additional Information (To help you to win Bounty):

Client side solution is required (I don't have access to the server side of the portal)
Videos are hosted by third party users

Rubberneck answered 18/5, 2017 at 11:14 Comment(1)

Vimeo will set a data-attr to the iframe (data-ready not really reliable - I think in fact of cache) but may you can play a bit around: here a fiddle – Phonogram 18/5, 2017 at 12:37

The easiest way that I found is to call the Vimeo API using the oEmbed open standard:

function checkIfVideoExists(url, callback){
    $.ajax({
        type:'GET',
        url: 'https://vimeo.com/api/oembed.json?url=' + encodeURIComponent(url),
        dataType: 'json',
        complete: function(xhr) {
            callback(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
});

Live example on jsFiddle.

Clubwoman answered 23/5, 2017 at 17:30 Comment(0)

note: running the code locally or on jsbin.com works fine but not here, not sure why.

Building upon what MarcelD said :

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>

Kissable answered 22/5, 2017 at 7:8 Comment(1)

Thanks Mate. Logically it seems to be good. But, when I tested it locally it's giving "video does not exist" for both the video. – Rubberneck 23/5, 2017 at 4:35

You can check with http get method if source is exist.

Jquery get :

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

Trichosis answered 18/5, 2017 at 11:35 Comment(1)

Thanks for the response mate.. But due to CORS restriction it will always fall to fail block. – Rubberneck 18/5, 2017 at 11:40

You could use Vimeo API, there is videos endpoint which is meets your need. Here is the sample of this action in Vimeo Playground

But, unfortunately there isn't JS SDK yet, you can use Server-Side SDK's before send page to browser and check video is exists or you need to deep dive and write your own implementation for client side and decide to show user video or not.

Daron answered 18/5, 2017 at 12:5 Comment(0)

Recommended topics

Hot tags