使用 jQuery 获取视频的 Vimeo 缩略图答案

【问题标题】：Get Vimeo thumbnail for video using jQuery使用 jQuery 获取视频的 Vimeo 缩略图
【发布时间】：2011-06-10 05:22:53
【问题描述】：

我发现了类似的问题，但没有一个答案清楚而轻松地显示如何使用 jQuery 和 JSON 获取 vimeo 视频的缩略图。如果有人可以提供帮助，那就太好了，这就是我所拥有的，但目前没有任何显示。

var vimeoVideoID = '17631561';
var videoCallback = 'showThumb';

$.getJSON('http://www.vimeo.com/api/v2/video/' + vimeoVideoID + '.json?callback=' + videoCallback,

function(data){
$(".thumbs").attr('src',data[0].thumbnail_large);
});

提前致谢。

【问题讨论】：

我同意，jQuery真的是最好的，它解决了各种浏览器问题，也很好。
我不是唯一一个 :)，如果可以的话，请投票赞成这个问题，因为它可能有助于获得答案。

标签： javascript jquery thumbnails vimeo

【解决方案1】：

我相信您遇到了“same origin policy”问题。您应该考虑使用“file_get_contents”或“fopen”之类的内容编写服务器端脚本，使您能够从 vimeo 获取数据，将其转换为 json，并通过一个不错的 ajax 调用输出到您的 javascript。

如果您想避免使用服务器端脚本，您可以使用数据类型 JSONP。

var vimeoVideoID = '17631561';

$.getJSON('https://www.vimeo.com/api/v2/video/' + vimeoVideoID + '.json?callback=?', {format: "json"}, function(data) {
         $(".thumbs").attr('src', data[0].thumbnail_large);
});

请注意，该 URL 与您使用它的方式有些不同。您定义为 var 的回调是不必要的。您将 getJSON 直接附加到函数，因此您将在 url '?' 中调用'callback'。这会通知 getJSON 函数将成功的数据返回传递给提供的函数。

你可以测试我的代码here。希望对您有所帮助！

【讨论】：

我真的不知道该怎么做，这似乎是多余的和不必要的。我认为这应该只是对图像的简单 json 请求，但无论如何，也许你对的信息表示感谢。
如果您不想使用服务器端脚本，或许可以考虑使用 JSONP 而不是 JSON。 en.wikipedia.org/wiki/JSON#JSONP vimeo.com/api/docs/response-formats#jsonp 它将绕过对服务器端脚本的需求，使您能够做您想做的事。有缺点，这就是为什么我要链接到描述它们的维基百科页面。希望这会有所帮助！
好吧，听起来不错，我将如何修改问题中的代码以使用 JSONP。
我更新了我的答案，以反映您将如何将脚本与 JSONP 一起使用，以便将其标记为已回答。
我在一个页面上有多个不同的 vimeo 视频时遇到了一点问题 jsfiddle.net/3wFUC 你能帮忙吗？再次感谢您的回答，很抱歉让您感到痛苦。

【解决方案2】：

请查看this page； Vimeo 有一个新方法调用 oEmbed，因为 Vimeo 现在正在推动它的新 oEmbed 技术。

上述方法在 IE 上会失败（不会显示拇指）。

【讨论】：

【解决方案3】：

使用updated API，它将是......

$.getJSON('https://vimeo.com/api/oembed.json?url=https://vimeo.com/' + id, {format: "json"}, function(data) {
  $(".thumbs").attr('src', data.thumbnail_url)
});

【讨论】：

非常感谢您添加新的 API 版本！

【解决方案4】：

您可以使用此功能支持所有类型的 Vimeo 链接和大小：

function get_vimeo_thumbnail(url, size, callback)
{
    var result;
    if(result = url.match(/vimeo\.com.*[\\\/](\d+)/))
    {
        var video_id   = result.pop();
        if(size == 'small'){
            var video_link = encodeURIComponent("https://vimeo.com/" + video_id + "?width=480&height=360");
            $.getJSON('https://vimeo.com/api/oembed.json?url=' + video_link, function(data) {
                if(data && data.thumbnail_url){
                    if (typeof(callback) !== 'undefined') {
                        callback(data.thumbnail_url);
                    }
                }
            });
        }
        else
        {
            $.getJSON('http://vimeo.com/api/v2/video/' + video_id + '.json', function(data) {
                if(data){
                    if (typeof(callback) !== 'undefined') {
                        var thumbnail_src = data[0].thumbnail_large;
                        if(thumbnail_src){
                            callback(thumbnail_src);
                        }
                    }
                }
            });
        }
    }
}

使用它：

// Available sizes: large, small
get_vimeo_thumbnail('https://vimeo.com/475772381', 'large' function(url){
   alert(url)
})

【讨论】：