我正在尝试将 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 主题的人来说，这将是最终的解决方案。
【问题讨论】：
标签： jquery youtube thumbnails vimeo
您可以通过观察 YouTube 视频缩略图具有独特的 URL 模式来做到这一点，您可以通过解析视频 ID 来生成该模式。 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 调用是异步的。
【讨论】：
success 只是一个回调，一个传递给processURL 的函数，在检索缩略图时会调用它，就像传递给 jQuery ajax 函数一样。跨度>
我使用了易江建议的一切。我不得不更改几行以使其正常工作，更改如下：
function processURL(url, success){
var id;
if (url.indexOf('youtube.com') > -1) {
<!-- CHANGED -->
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) {
<!-- CHANGED -->
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) {
<!-- CHANGED -->
success(data[0].thumbnail_large);
}
});
} else {
throw new Error('Unrecognised URL');
}
function processYouTube(id) {
if (!id) {
throw new Error('Unsupported YouTube URL');
}
<!-- CHANGED -->
success('http://i2.ytimg.com/vi/' + id + '/hqdefault.jpg');
}
}
底部的 2 处更改只是为了修复“成功”的拼写。
【讨论】：
此外，Vimeo 使用https://vimeo.com/n 格式，因此将 s 设为可选，并且 id 是拆分数组中的第 4[3] 个而不是第 2[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
}
}
【讨论】：
我认为现在在 vimeo.com 的 id 始终是最后一个值...
} else if (sourceVideo.indexOf("vimeo.com") >= 0) {
id = sourceVideo.split('/');
id = id[id.length-1];
}
不需要 3 正则表达式。
【讨论】：
这是我的例子，
YouTube 网址示例：https://www.youtube.com/watch?v=DNWo43u6Kqo
Vimeo URL 示例：https://player.vimeo.com/video/30572181
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<title>Video Thumbnails</title>
</head>
<body>
<div style="width:80%">
YouTube/Vimeo URL :
<input type="text" id="txtVideoLink" value="https://player.vimeo.com/video/30572181" style="width:30%"/>
<a href="javascript:void(0)" onclick="GetImageFromVideoURL()">Get Video Thumbnail</a>
<br />
<br />
<img src="" id="thumbImg">
</div>
<script>
function GetImageFromVideoURL() {
var i, image_url, isValidURL, isVValidURL, isEmbValidURL, uniqueIdLength, uniqueID;
uniqueIdLength = 11;
image_url = $('#txtVideoLink').val();
var url;
if (image_url != null) {
url = image_url;
}
else {
url = "";
}
if (url.search("youtube") != -1) {
isValidURL = image_url.indexOf("www.youtube.com/watch?v=");
isVValidURL = image_url.indexOf("www.youtube.com/v/");
isEmbValidURL = image_url.indexOf("www.youtube.com/embed/");
if (isValidURL == -1 && isVValidURL == -1 && isEmbValidURL == -1) {
alert("Invalid URL");
return false;
}
if (isValidURL != -1) {
i = image_url.indexOf("v=");
}
else if (isVValidURL != -1) {
i = image_url.indexOf("v/");
}
else if (isEmbValidURL != -1) {
i = image_url.indexOf("embed/");
i = i + 4;
}
i = i + 2;
uniqueID = image_url.substr(i, uniqueIdLength);
imageURL = 'https://img.youtube.com/vi/' + uniqueID + '/0.jpg';
$('#thumbImg').attr("src", imageURL);
return true;
}
else if ((url.search("vimeo") != -1)) {
isVimeoURL = image_url.indexOf("vimeo.com/video");
isvVimeoURL = image_url.indexOf("www.vimeo.com/video");
if (isVimeoURL == -1 && isvVimeoURL == -1) {
alert("Invalid URL");
return false;
}
if (isVimeoURL != -1) {
i = image_url.indexOf("video/");
}
i = i + 6;
uniqueID = image_url.substr(i, uniqueIdLength);
$.ajax({
type: 'GET',
url: 'https://vimeo.com/api/v2/video/' + uniqueID + '.json',
jsonp: 'callback',
dataType: 'jsonp',
success: function (data) {
var thumbnail_src = data[0].thumbnail_large;
$('#thumbImg').attr("src", thumbnail_src);
}
});
return true;
}
alert("Invalid URL");
$('#txtVideoLink').val("");
return false;
}
</script>
</body>
</html>
【讨论】：