javascript - 嵌入缩略图 Youtube 视频

Question

我需要嵌入 Youtube 视频的缩略图，当我点击缩略图时，视频开始播放。我得到了以下嵌入视频的 php 代码(请参阅下面的 php 代码)，但我也需要嵌入缩略图的代码，当您点击缩略图时它会开始播放。我认为视频开始播放的代码是下面的代码(见下面的js代码)。

PHP 代码:

<?php
function mininaturas_youtube_func( $atts ) {
$a = shortcode_atts( array(
'id' => ''
), $atts);
return '<iframe width="560" height="315" 
src="https://www.youtube.com/embed/' . $a["id"] . '" frameborder="0" 
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in- 
picture" allowfullscreen></iframe>';
}
add_shortcode( 'miniatura_youtube', 'mininaturas_youtube_func' );
?>

Js 代码(我的尝试):

$(document).ready(function(){
  $("#play").click(function(){
    $("#remove").hide();
    $("#add").show();
  });
});

你能帮忙包含 php 代码(到 PHP 代码 部分)以嵌入 Youtube 视频的缩略图并查看 js 代码吗？谢谢

Answer 1

通过使用它，您可以将缩略图嵌入到视频中。

每个 YouTube 视频都有 4 个生成的图像。它们的格式如下:

https://img.youtube.com/vi/<insert-youtube-video-id-here>/0.jpg

https://img.youtube.com/vi/<insert-youtube-video-id-here>/1.jpg

https://img.youtube.com/vi/<insert-youtube-video-id-here>/2.jpg

https://img.youtube.com/vi/<insert-youtube-video-id-here>/3.jpg

列表中的第一个是全尺寸图像，其他是缩略图。默认缩略图(即 1.jpg、2.jpg、3.jpg 之一)是:

https://img.youtube.com/vi/<insert-youtube-video-id-here>/default.jpg

对于缩略图的高质量版本，使用类似于此的 url:

https://img.youtube.com/vi/<insert-youtube-video-id-here>/hqdefault.jpg

还有一个中等质量版本的缩略图，使用类似于 HQ 的 url:

https://img.youtube.com/vi/<insert-youtube-video-id-here>/mqdefault.jpg

对于标清版的缩略图，使用类似这样的url:

https://img.youtube.com/vi/<insert-youtube-video-id-here>/sddefault.jpg

对于缩略图的最大分辨率版本，使用与此类似的 url:

https://img.youtube.com/vi/<insert-youtube-video-id-here>/maxresdefault.jpg

上述所有网址也可通过 http 访问。此外，在上面的示例网址中，略短的主机名 i3.ytimg.com 代替了 img.youtube.com。

Click For More Answer.