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

Question

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

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

如何从中提取缩略图iframe？

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有效 YouTube 视频 ID 的 URL，并假定它的长度为 11 个字符，这是事实上的标准。

见jsFiddle 演示

Answer 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

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;
}