我試圖把YouTube的縮略圖和Vimeo縮略圖一起在同一個腳本，但它不是一個真正容易的，我是因爲我是一個新的jQuery的。獲取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主題明確的解決方案。
你通過觀察的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調用是異步的。
我用姜毅提出的一切。我不得不改變幾行得到它正常工作對我來說，變化是注意到如下：
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.com的ID總是最後一個值...
} else if (sourceVideo.indexOf("vimeo.com") >= 0) {
id = sourceVideo.split('/');
id = id[id.length-1];
}
不需要3正則表達式。
此外，Vimeo的使用https://vimeo.com/n格式，以便使在S可選的，並且id是第四[3]未第二[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
}
}
這是我的例子，
樣品YouTube網址：https://www.youtube.com/watch?v=DNWo43u6Kqo
樣品Vimeo的網址：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>
你好，非常好，你可以發佈它如何工作exemle？我沒有得到什麼意思是「成功」變量。感謝您的回答：D – 2011-03-05 14:49:43
@ user645691'success'只是一個回調函數，您傳遞給'processURL'函數，在檢索縮略圖時會調用這個函數，就像傳遞給jQuery ajax函數一樣。 – 2011-03-05 16:42:17
可愛的工作。它工作得很好......謝謝你。 – 2011-03-08 14:50:43