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

Question

例如，我有一篇博客文章，其中包含以下的iframe。

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

我该如何从这个iframe中提取缩略图？

- Hamza Dhamiya

---

您还可以更改缩略图的质量。例如： 默认 http://img.youtube.com/vi/insert-youtube-video-id-here/default.jpg 高清晰度缩略图 http://img.youtube.com/vi/insert-youtube-video-id-here/hqdefault.jpg 中等质量缩略图 http://img.youtube.com/vi/insert-youtube-video-id-here/mqdefault.jpg 标准清晰度缩略图 http://img.youtube.com/vi/insert-youtube-video-id-here/sddefault.jpg 最高分辨率缩略图 http://img.youtube.com/vi/insert-youtube-video-id-here/maxresdefault.jpg 字体和更多信息: https://www.thewebtaylor.com/articles/how-to-get-a-youtube-videos-thumbnail-image-in-high-quality - Caike Bispo

Answer 1

YouTube缩略图

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

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

• [video-id] 是 YouTube 视频的 ID，例如 1sIWez9HAbA。
• [thumbnail-number] 是每个视频通常有的 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);
}

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

请参见jsFiddle演示

- Boaz

---

我想知道为什么你使用了 .pop()。 - Hamza Dhamiya

更新了答案，以更准确地匹配 iframe URL 中的视频 ID。在这种情况下，.pop() 方法返回正则表达式的最后一组匹配 - 视频 ID。 - Boaz

你刚刚节省了我好几个小时的时间。我一直在尝试爬取页面上的进度图片，因为当你悬停在时间进度条上时会弹出这些图片，但是我无法找到任何在观看视频时隐藏在页面中的缩略图像素。一直没有得到很好的效果。谢谢你。 - Dal

Answer 2

使用以下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

最大分辨率

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

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

- Gopal

---

有些视频，比如这个链接，没有最高分辨率，你怎么检查呢？ - Xanthan

Answer 3

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

https://www.youtube.com/watch?v=WZKW2Hq2fks

https://youtu.be/WZKW2Hq2fks

https://www.youtube.com/embed/WZKW2Hq2fks 

https://youtu.be/WZKW2Hq2fks?t=66

并且，您可以得到您想要的视频质量。

使用方法：

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

---

function get_youtube_thumbnail(url, quality){
    if(url){
        var video_id, thumbnail, result;
        if(result = url.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/))
        {
            video_id = result.pop();
        }
        else if(result = url.match(/youtu.be\/(.{11})/))
        {
            video_id = result.pop();
        }

        if(video_id){
            if(typeof quality == "undefined"){
                quality = 'high';
            }
        
            var quality_key = 'maxresdefault'; // Max quality
            if(quality == 'low'){
                quality_key = 'sddefault';
            }else if(quality == 'medium'){
                quality_key = 'mqdefault';
            } else if (quality == 'high') {
                quality_key = 'hqdefault';
            }

            var thumbnail = "http://img.youtube.com/vi/"+video_id+"/"+quality_key+".jpg";
            return thumbnail;
        }
    }
    return false;
}

- Mohamad Hamouday