使用jQuery一次性获取YouTube或Vimeo缩略图

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

我想问一下是否有人可以看看这个在任何浏览器中运行良好的jQuery脚本： http ： //jquery-howto.blogspot.com/2009/02/how-to-get-youtube-video-screenshot.html

我也看到了这个问题： 从Vimeo获取img缩略图？ ，但是没有关于如何使用jQuery做到这一点。

我认为对于那些已经了解jQuery编码的人来说应该是非常容易的，并且它将成为谁将制作使用两个video的Tumblr主题的权威解决方案。

Answer 1

您可以通过观察YouTubevideo缩略图具有不同的URL模式来执行此操作，您可以通过解析videoID来生成该模式。 可以类似地获得Vimeo缩略图，但解析videoID，然后使用简单API获取缩略图的链接。

我为这个Meta问题写了一些代码来做这件事 ; 它不是特别干净但它应该工作：

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

Answer 2

我用了易江所说的一切。 我不得不更改几行以使其正常工作，更改如下所示：

 function processURL(url, success){ var id; if (url.indexOf('youtube.com') > -1) {  id = url.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(/http:\/\/(www\.)?vimeo.com\/(\d+)($|\/)/)) { 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) {  success(data[0].thumbnail_large); } }); } else { throw new Error('Unrecognised URL'); } function processYouTube(id) { if (!id) { throw new Error('Unsupported YouTube URL'); }  success('http://i2.ytimg.com/vi/' + id + '/hqdefault.jpg'); } } 

最初的两个变化就是修复“成功”拼写。

Answer 3

此外，Vimeo使用https://vimeo.com/n格式，因此使s可选，id是split数组中的第4 [3]而不是2nd [1]：

 function get_video_thumb(url, callback){ var id = get_video_id(url); if (id['type'] == 'y') { return processYouTube(id); } else if (id['type'] == 'v') { $.ajax({ url: 'http://vimeo.com/api/v2/video/' + id['id'] + '.json', dataType: 'jsonp', success: function(data) { callback({type:'v', id:id['id'], url:data[0].thumbnail_large}); } }); } function processYouTube(id) { if (!id) { throw new Error('Unsupported YouTube URL'); } callback({type:'y',id:id['id'],url:'http://i2.ytimg.com/vi/'+id['id'] + '/hqdefault.jpg'}); } } function get_video_id(url) { var id; var a; if (url.indexOf('youtube.com') > -1) { id = url.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(/https?:\/\/(www\.)?vimeo.com\/(\d+)($|\/)/)) { id = url.split('/')[3]; } 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'); } } else { throw new Error('Unrecognised URL'); } a = {type:'v',id:id}; return a; function processYouTube(id) { if (!id) { throw new Error('Unsupported YouTube URL'); } a = {type:'y',id:id}; return(a); // default.jpg OR hqdefault.jpg } } 

Answer 4

我认为现在在vimeo.com上，id始终是最后一个值…

 } else if (sourceVideo.indexOf("vimeo.com") >= 0) { id = sourceVideo.split('/'); id = id[id.length-1]; } 

不需要3个正则表达式。

Answer 5

这是我的例子，

YouTubeurl示例： https ： //www.youtube.com/watch？v = DNWo43u6Kqo

示例Vimeo URL： https ： //player.vimeo.com/video/30572181

          
 YouTube/Vimeo URL :  Get Video Thumbnail