使用jQuery一次性获取YouTube或Vimeo缩略图,可以通过以下步骤实现:
在HTML文件中引入jQuery库,可以使用CDN地址或者下载到本地并引入。
使用jQuery的$.ajax()
方法获取YouTube或Vimeo的API数据,然后提取缩略图URL。
function getThumbnail(videoUrl, callback) {
var videoId = getVideoId(videoUrl);
if (videoId) {
if (isYouTube(videoUrl)) {
$.ajax({
url: 'https://www.googleapis.com/youtube/v3/videos?id=' + videoId + '&key=YOUR_API_KEY&part=snippet',
dataType: 'jsonp',
success: function(data) {
if (data.items && data.items.length > 0) {
var thumbnailUrl = data.items[0].snippet.thumbnails.default.url;
callback(thumbnailUrl);
}
}
});
} else if (isVimeo(videoUrl)) {
$.ajax({
url: 'https://vimeo.com/api/v2/video/' + videoId + '.json',
dataType: 'json',
success: function(data) {
if (data && data.length > 0) {
var thumbnailUrl = data[0].thumbnail_small;
callback(thumbnailUrl);
}
}
});
}
}
}
function getVideoId(videoUrl) {
var videoId = null;
if (isYouTube(videoUrl)) {
videoId = videoUrl.match(/(?:https?:\/{2})?(?:w{3}\.)?youtu(?:be)?\.(?:com|be)(?:\/watch\?v=|\/)([^\s&]+)/)[1];
} else if (isVimeo(videoUrl)) {
videoId = videoUrl.match(/https?:\/\/(?:www\.)?vimeo.com\/(?:channels\/(?:\w+\/)?|groups\/([^\/]*)\/videos\/|album\/(\d+)\/video\/|video\/)?(\d+)(?:$|\/|\?)/)[3];
}
return videoId;
}
function isYouTube(videoUrl) {
return videoUrl.indexOf('youtube.com') > -1 || videoUrl.indexOf('youtu.be') > -1;
}
function isVimeo(videoUrl) {
return videoUrl.indexOf('vimeo.com') > -1;
}
getThumbnail()
方法在需要获取缩略图的地方调用getThumbnail()
方法,并传入回调函数处理缩略图URL。
getThumbnail('https://www.youtube.com/watch?v=VIDEO_ID', function(thumbnailUrl) {
console.log(thumbnailUrl);
});
getThumbnail('https://vimeo.com/VIDEO_ID', function(thumbnailUrl) {
console.log(thumbnailUrl);
});
注意:在实际使用中,需要将YOUR_API_KEY
替换为自己的Google API密钥。
领取专属 10元无门槛券
手把手带您无忧上云