jQuery 如何从 YouTube iframe 获取 YouTube 缩略图?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/18681788/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 22:12:31  来源:igfitidea点击:

How to get a YouTube thumbnail from a YouTube iframe?

javascriptjqueryiframeyoutube

提问by Mohammed Hamz?

For instance I have a blog post that has the following iframe.

例如,我有一篇博客文章,其中包含以下内容iframe

<iframe width="420" height="315" src="//www.youtube.com/embed/1sIWez9HAbA" frameborder="0" allowfullscreen></iframe>

How can I extract the thumbnail from this iframe?

如何从中提取缩略图iframe

回答by Boaz - Reinstate Monica

YouTube thumbnails

YouTube 缩略图

YouTube thumbnails can be found in this standard path:

YouTube 缩略图可以在以下标准路径中找到:

http://img.youtube.com/vi/[video-id]/[thumbnail-number].jpg
  • [video-id]is the YouTube video ID, e.g. 1sIWez9HAbA.
  • [thumbnail-number]is the number of the thumbnail of the 4 each video usually has, e.g. 0.
  • [video-id]是 YouTube 视频 ID,例如1sIWez9HAbA
  • [thumbnail-number]是每个视频通常具有的 4 个缩略图的编号,例如0

Getting the thumbnail from an iframe

从 iframe 获取缩略图

So, based on the iframe's srcattribute you may construct the URL of the thumbnail directly.

因此,根据iframesrc属性,您可以直接构建缩略图的 URL。

For example, using jQuery:

例如,使用 jQuery:

var iframe           = $('iframe:first');
var iframe_src       = iframe.attr('src');
var youtube_video_id = iframe_src.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/).pop();

if (youtube_video_id.length == 11) {
    var video_thumbnail = $('<img src="//img.youtube.com/vi/'+youtube_video_id+'/0.jpg">');
    $(body).append(video_thumbnail);
}

Note this example checks the URL of the iframefor a valid YouTube video ID and assumes it to be 11 characters long, which is the de facto standard.

请注意,此示例检查iframe有效 YouTube 视频 ID的 URL并假定其长度为 11 个字符,这是事实上的标准。

See jsFiddle Demo

参见jsFiddle 演示

回答by Gopala raja naika

Get Youtube thumbnail images using below urls

使用以下网址获取 Youtube 缩略图

Low quality

低质量

 https://img.youtube.com/vi/[video-id]/sddefault.jpg

medium quality

中等质量

 https://img.youtube.com/vi/[video-id]/mqdefault.jpg

High quality

高质量

http://img.youtube.com/vi/[video-id]/hqdefault.jpg

maximum resolution

最大分辨率

http://img.youtube.com/vi/[video-id]/maxresdefault.jpg

example: https://img.youtube.com/vi/OYr-KPboPDw/hqdefault.jpg

示例:https: //img.youtube.com/vi/OYr-KPboPDw/hqdefault.jpg