jquery - 播放前隐藏 YouTube 视频嵌入图像

Question

我正在制作一个网站，我想嵌入一个 YouTube 视频。我的前辈讨厌 YouTube 的普通播放器布局，所以我对其进行了一些定制（没有按钮等）。问题是，当我打开网站页面时，YouTube 会显示一张图片（播放器大小，在我的情况下为 480p）并且该图片确实被破坏了。

我需要一些方法来获取 YouTube 嵌入代码并在其上放置图像。当我单击图像时，它应该会更改为 YouTube，然后自动开始播放视频。这样我可以避免人们在打开页面时看到那个丑陋的预览图像。

谢谢你。

Answer 1

将带有图像的 div 放在要显示视频的任何位置：

<div id="coverimageforplayer"><img class="introvideo" src="video-cover.jpg" width="800" height="450" /></div>

现在，添加以下 jquery 代码：

$('#coverimageforplayer').click(function() {
        var embedCode = '<iframe ...Your Youtube embed code></iframe>';
        $('#coverimageforplayer').html(embedCode);
    });

对我来说就像一个魅力。

Answer 2

如果视频被隐藏，Youtube 将不会播放视频，因此您可以尝试将自动播放设置为一个但隐藏 div，然后您可以使用 jQuery 将您的封面与视频“交换”。视频将加载并自动播放。

使用 jQuery：

<div id="youtubeplayer" style="display:none;">
<!-- Player code with &autoplay=1 -->
</div>
<div id="coverimageforplayer"><img src="wherever.png" /></div>

<script type="text/javascript">
$('#coverimageforplayer').click(function() {
$('#coverimageforplayer').replaceWith($('#youtubeplayer').show());
});
</script>

Answer 3

如果大部分访问者永远不会真正开始播放，我建议您使用一种方法，img在页面上只有标签（带有您想要的任何自定义图像），直到有人点击其中一个，此时您换入YouTube iframe 嵌入式播放器。这样你就可以避免提前加载播放器，除非你知道你确实需要它。

YouTube Direct Lite 代码库中有一个这样做的示例，包括在鼠标悬停时覆盖“播放”图标。您可以在以下位置查看现场演示

http://ytdirectlite.appspot.com/static-min/submit.html

如果您登录该页面底部的提交界面，然后转到“我的 YouTube 视频”选项卡。

有几段代码可以处理这个问题，但最相关的位是

https://code.google.com/p/youtube-direct-lite/source/browse/static/js/ytdl/load.js#71 https://code.google.com/p/youtube-direct-lite /source/browse/static/js/ytdl/player.js#17