Question

所以，我试图只显示一个Vimeo视频。我正在使用新的JavaScript API。

根据他们的documentation，当加载时视频面临错误时，应触发error事件。我相信，添加错误的Vimeo视频网址也会触发error事件。

这就是我为实现error事件而采取的措施：

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

方法1

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

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

方法2

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

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

他们都没有工作。它从未执行过错误块。

一些其他信息（帮助您赢得赏金）：

需要客户端解决方案（我无权访问门户的服务器端）
视频由第三方用户托管

Answer 1

注意：在本地或在jsbin.com上运行代码可以正常运行但不在此处，不确定原因。

以MarcelD所说的为基础：

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>

Answer 2

我发现最简单的方法是使用oEmbed开放标准调用Vimeo API：

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关于jsFiddle。

Answer 3

如果源存在，您可以使用http get方法进行检查。

Jquery得到：

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

Answer 4

您可以使用Vimeo API，videos endpoint符合您的需要。以下是Vimeo Playground

中此操作的示例

但是，遗憾的是还没有JS SDK，你可以在发送页面到浏览器之前使用Server-Side SDK并检查视频是否存在，或者你需要深入了解并为客户端编写自己的实现并决定显示用户视频。

你如何确保Vimeo视频存在？

4 个答案: