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=";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
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./video/13333693532?autoplay=0&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
- 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 – MarcelD Commented May 18, 2017 at 12:37
4 Answers
Reset to default 2 +50The 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./api/oembed.json?url=' + encodeURIComponent(url),
dataType: 'json',
plete: function(xhr) {
callback(xhr.status);
}
});
}
checkIfVideoExists("https://vimeo./217775903", function(status){
console.log(status); // 200 - OK
});
checkIfVideoExists("https://vimeo./234242343", function(status){
console.log(status); // 404 - Not found
});
Live example on jsFiddle.
note: running the code locally or on jsbin. 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./api/player.js"></script>
</head>
<body>
<iframe id="player1" src="https://player.vimeo./video/215101645556" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
<iframe id="player2" src="https://player.vimeo./video/215101646" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</body>
</html>You can check with http get method if source is exist.
Jquery get :
$.get( "https://player.vimeo./video/13333693532?autoplay=0&background=1")
.done(function() {
alert( "success" );
})
.fail(function() {
alert( "error" );
})
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.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745461361a4628722.html
评论列表（0条）