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
How to get a YouTube thumbnail from a YouTube iframe?
提问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 src
attribute you may construct the URL of the thumbnail directly.
因此,根据iframe
的src
属性,您可以直接构建缩略图的 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 iframe
for 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