jquery - 使用jQuery一次性获得YouTube或Vimeo缩略图

Question

我试图将YouTube缩略图和Vimeo缩略图放到同一脚本中，但是对我来说这并不容易，因为我是jQuery的新手。

我想问问是否有人可以看一下在任何浏览器中都能正常工作的jQuery脚本:http://jquery-howto.blogspot.com/2009/02/how-to-get-youtube-video-screenshot.html

我也看到了一个问题:Get img thumbnails from Vimeo?，但是与如何使用jQuery无关。

我认为，对于已经知道jQuery编码的人来说，这应该非常容易，对于那些将要使用这两个视频的Tumblr主题的人，这将是最终的解决方案。

Answer 1

您可以通过观察YouTube视频缩略图具有独特的URL模式来实现此目的，可以通过解析视频ID来生成该URL模式。可以类似地获得Vimeo缩略图，但是先解析视频ID，然后使用simple API获取指向缩略图的链接。

我为this Meta question编写了一些代码来做到这一点；它不是特别干净，但是应该可以工作:

function processURL(url, success){
    var id;

    if (url.indexOf('youtube.com') > -1) {
        id = url.split('/')[1].split('v=')[1].split('&')[0];
        return processYouTube(id);
    } else if (url.indexOf('youtu.be') > -1) {
        id = url.split('/')[1];
        return processYouTube(id);
    } else if (url.indexOf('vimeo.com') > -1) {
        if (url.match(/^vimeo.com\/[0-9]+/)) {
            id = url.split('/')[1];
        } else if (url.match(/^vimeo.com\/channels\/[\d\w]+#[0-9]+/)) {
            id = url.split('#')[1];
        } else if (url.match(/vimeo.com\/groups\/[\d\w]+\/videos\/[0-9]+/)) {
            id = url.split('/')[4];
        } else {
            throw new Error('Unsupported Vimeo URL');
        }

        $.ajax({
            url: 'http://vimeo.com/api/v2/video/' + id + '.json',
            dataType: 'jsonp',
            success: function(data) {
                sucess(data[0].thumbnail_large);
            }
        });
    } else {
        throw new Error('Unrecognised URL');
    }

    function processYouTube(id) {
        if (!id) {
            throw new Error('Unsupported YouTube URL');
        }

        sucess('http://i2.ytimg.com/vi/' + id + '/hqdefault.jpg');
    }
}

该函数使用回调，因为Vimeo API调用是异步的。