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

Question

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

9

我发现类似的问题，但是没有一个答案清晰易懂地展示如何使用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);
});

感谢您提前的帮助。

- Lee Tindell

我同意，jQuery确实是最好的，它解决了各种浏览器问题，并且也很好用。 - goat

那我不是唯一一个人了：），如果你能投票支持这个问题，可能会有助于得到答案。 - Lee Tindell

4个回答

5

使用更新的API，将更加容易查找Vimeo上特定视频的元数据信息。

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

- Brian T

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

2

您可以使用此函数，支持所有类型的 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)
})

- Mohamad Hamouday

1

请查看此页面；Vimeo现在推出了新的oEmbed技术，并称之为oEmbed。

上述方法在IE上会失败（不会显示缩略图）。

- Stefan Bracke

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Lance · Accepted Answer

我认为你遇到了“同源策略”的问题。你应该考虑编写一个服务端脚本，使用类似于“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与您现在使用的方式有所不同。您定义为变量的回调是不必要的。您直接将getJSON附加到一个函数上，因此将调用URL中的“callback”。这将通知getJSON函数将成功返回的数据传递给提供的函数。

您可以在此处测试我的代码。希望它能帮到您！