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的{{1}}属性，您可以直接构建缩略图的网址。

例如，使用jQuery：

src

请注意，此示例会检查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); }的有效YouTube视频ID的网址，并假设它长度为11个字符，这是事实上的标准。

请参阅jsFiddle Demo

Answer 2

从此处获取默认显示图片

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

示例：assignment expressions (PEP 572)

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

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

3 个答案:

请参阅jsFiddle Demo