如何从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's 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 的网址,并假设它长度为11个字符,这是事实上的标准.

请参阅jsFiddle演示

Answer 2

使用以下网址获取默认的显示图片

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

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

Answer 3

此功能适用于所有类型的 YouTube 链接和域，例如
\n https://www.youtube.com/watch?v=WZKW2Hq2fks

\n

https://youtu.be/WZKW2Hq2fks

\n

https://www.youtube.com/embed/WZKW2Hq2fks\xc2\xa0

\n

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

\n

并且您可以获得您想要的质量。

\n

使用方法：

\n

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

\n\n

function get_youtube_thumbnail(url, quality){\n    if(url){\n        var video_id, thumbnail, result;\n        if(result = url.match(/youtube\\.com.*(\\?v=|\\/embed\\/)(.{11})/))\n        {\n            video_id = result.pop();\n        }\n        else if(result = url.match(/youtu.be\\/(.{11})/))\n        {\n            video_id = result.pop();\n        }\n\n        if(video_id){\n            if(typeof quality == "undefined"){\n                quality = \'high\';\n            }\n        \n            var quality_key = \'maxresdefault\'; // Max quality\n            if(quality == \'low\'){\n                quality_key = \'sddefault\';\n            }else if(quality == \'medium\'){\n                quality_key = \'mqdefault\';\n            } else if (quality == \'high\') {\n                quality_key = \'hqdefault\';\n            }\n\n            var thumbnail = "http://img.youtube.com/vi/"+video_id+"/"+quality_key+".jpg";\n            return thumbnail;\n        }\n    }\n    return false;\n}\n

\n