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将不会播放视频，因此您可以尝试将自动播放设置为1，但隐藏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

播放前隐藏YouTube视频嵌入图片

3 个答案: