Javascript 如何从YouTube iframe获取YouTube缩略图？

例如，我有一篇博文，上面有以下

iframe

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

---

如何从这个

iframe

中提取缩略图？

YouTube缩略图

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

http://img.youtube.com/vi/[视频id]/[缩略图编号].jpg

• [video id]

  是YouTube视频id，例如

  1sIWez9HAbA

• [缩略图编号]

  是每4个缩略图的编号 视频通常有，例如

  0

从iframe获取缩略图

因此，基于

iframe

的

src

属性，您可以直接构建缩略图的URL

例如，使用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);
}

var-iframe=$（'iframe:first'）；
var iframe_src=iframe.attr（'src'）；
var youtube_video_id=iframe_src.match（/youtube\.com.*（\？v=|\/embed\/）（.{11}）/）.pop（）；
如果（youtube_video_id.length==11）{
var video_缩略图=$（''）；
$（正文）.append（视频缩略图）；
}

注意：本例检查

iframe

的URL是否有有效的YouTube视频ID，并假设其长度为11个字符，这是事实上的标准

---

请参见使用以下URL获取Youtube缩略图

低质量

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

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

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

中等质量

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

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

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

高质量

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

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

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

最大分辨率

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

---

示例：

此功能适用于所有类型的youtube链接和域，例如

你可以得到你想要的质量

要使用它：

// quality options: low, medium, high, max | default is max.
var thumbnail = get_youtube_thumbnail('https://youtu.be/WZKW2Hq2fks', 'max');
console.log(thumbnail);

---

---

我想知道为什么您使用.pop（）更新了答案，以便更准确地匹配

iframe

的URL中的视频ID。在本例中，

.pop（）

方法返回正则表达式的最后一个组匹配项-视频ID。您刚刚为我节省了几个小时。我试图在页面上搜索当你将鼠标悬停在时间进度条上时弹出的进度图像，因为当你观看视频时，我找不到隐藏在页面中的任何缩略图。工作不顺利。谢谢。你也可以更改缩略图的质量。例如，默认高质量缩略图中等质量标准清晰度最大分辨率字体和更多信息：