CODEWITHSUNDEEP
javascriptjqueryvimeovimeo-api
Sanjay Joshi
Sanjay Joshi

Reputation: 2066

How do you make sure that Vimeo video exist?

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):

Upvotes: 6

Views: 3086

Answers (4)

Etienne Martin
Etienne Martin

Reputation: 11609

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.

Upvotes: 2

d9ngle
d9ngle

Reputation: 1469

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>

Upvotes: 1

ugurerkan
ugurerkan

Reputation: 800

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.

Upvotes: 0

krmzcn
krmzcn

Reputation: 1

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" );
})

Upvotes: 0

Related Questions