使用 jQuery 獲取視頻的 Vimeo 縮略圖

Question

我發現了類似的問題，但沒有一個答案清楚且輕松地顯示如何使用 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);
});

提前致謝。

Answer 1

我相信您遇到了“同源政策”問題。 您應該考慮使用諸如“ 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 函數將成功的數據返回傳遞給提供的函數。

你可以在這里測試我的代碼。 希望能幫助到你！

Answer 2

使用更新的 API ，它將是...

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

Answer 3

請查看此頁面； Vimeo 有一個新的方法調用oEmbed因為 Vimeo 現在正在推動它的新 oEmbed 技術。

上面的方法將在 IE 上失敗（不會顯示拇指）。

Answer 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)
})