使用jQuery一次性获得YouTube或Vimeo缩略图 [英] Get YouTube or Vimeo Thumbnails in one shot with jQuery

问题描述

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

I'm trying to put YouTube thumbnail and Vimeo thumbnail together in the same script, but its not really easy for me because I'm a new to jQuery.

我想问问是否有人可以看一下在任何浏览器中都能正常运行的jQuery脚本:

I would to ask if somebody could take a look to this jQuery script that works fine in any browser: http://jquery-howto.blogspot.com/2009/02/how-to-get-youtube-video-screenshot.html

我还看到了一个问题:从Vimeo获取img缩略图吗?，但是没有关于如何使用jQuery的任何内容.

I've also seen the question: Get img thumbnails from Vimeo?, but there's nothing about how to do it with jQuery.

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

I think it should be very easy to make for who already know the jQuery coding, and it would be the definitive solutions for who's going to make a Tumblr theme that uses both videos.

推荐答案

您可以通过观察YouTube视频缩略图具有不同的URL模式来实现此目的，可以通过解析视频ID来生成该URL模式.可以类似地获得Vimeo缩略图，但先解析视频ID，然后使用简单API 获取缩略图的链接.

You do this by observing that YouTube video thumbnails have a distinct URL pattern, which you can generate by parse out the video id. Vimeo thumbnails can be obtained similarly, but parsing out the video id and then using the simple API to obtain the link to the thumbnail.

我为此元问题编写了一些代码来执行此操作;它不是特别干净，但应该可以使用:

I wrote some code to do this for this Meta question; it's not particularly clean but it should work:

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调用是异步的.

The function uses a callback because Vimeo API calls are asynchronous.

这篇关于使用jQuery一次性获得YouTube或Vimeo缩略图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！