你如何确保 Vimeo 视频存在？答案

【问题标题】：How do you make sure that Vimeo video exist?你如何确保 Vimeo 视频存在？
【发布时间】：2017-10-18 04:15:45
【问题描述】：

所以，我试图仅在存在 Vimeo 视频时才显示它。我正在使用新的 JavaScript API。

根据他们的documentation，error 事件应在加载时出现视频面部错误时触发。我相信，添加错误的 Vimeo 视频 URL 也会触发 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);
});

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

一些附加信息（帮助您赢得赏金）：

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

【问题讨论】：

Vimeo 将为 iframe 设置一个 data-attr（数据准备好不是很可靠 - 我认为实际上是缓存）但你可以玩一下：here a fiddle

标签： javascript jquery vimeo vimeo-api

【解决方案1】：

我发现最简单的方法是使用 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 上。

【讨论】：

【解决方案2】：

注意：在本地或在 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>

【讨论】：

谢谢伙计。从逻辑上讲，它似乎是好的。但是，当我在本地对其进行测试时，这两个视频都给出了“视频不存在”。

【解决方案3】：

您可以使用Vimeo API，videos endpoint 可以满足您的需求。这是Vimeo Playground中此操作的示例

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

【讨论】：

【解决方案4】：

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

jQuery 获取：

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

【讨论】：

感谢小伙伴的回复。但由于 CORS 的限制，它总是会失败阻止。