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

【问题标题】：How to get a YouTube thumbnail from a YouTube iframe?如何从 YouTube iframe 中获取 YouTube 缩略图？
【发布时间】：2013-09-11 23:18:47
【问题描述】：

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

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

如何从iframe 中提取缩略图？

【问题讨论】：

您还可以更改缩略图的质量。例如。默认img.youtube.com/vi/insert-youtube-video-id-here/default.jpg高质量缩略图img.youtube.com/vi/insert-youtube-video-id-here/hqdefault.jpg中等质量img.youtube.com/vi/insert-youtube-video-id-here/mqdefault.jpg标准清晰度img.youtube.com/vi/insert-youtube-video-id-here/sddefault.jpg最大分辨率img.youtube.com/vi/insert-youtube-video-id-here/…字体和更多信息：thewebtaylor.com/articles/…

标签： javascript jquery iframe youtube

【解决方案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 Demo

【讨论】：

我想知道你为什么使用 .pop()
更新了答案以更准确地匹配 iframe 的 URL 中的视频 ID。在这种情况下，.pop() 方法返回正则表达式的最后一个组匹配 - 视频 ID。
你刚刚为我节省了几个小时。我试图抓取页面以获取当您将鼠标悬停在时间进度条上时弹出的进度图像，因为在您观看视频时我找不到隐藏在页面中的任何缩略图。工作不顺利。谢谢。

【解决方案2】：

使用以下网址获取 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

【讨论】：

【解决方案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;
}

【讨论】：