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

Question

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

jqueryhtmliframeyoutube-api

3

我正在制作一个网站，想要嵌入YouTube视频。我的前辈不喜欢YouTube正常的播放器布局，所以我稍微自定义了一下（没有按钮等）。问题是当我打开网页时，YouTube显示了一张图像（播放器大小，我这里是480p），而且这个图像非常糟糕。

我需要找到一种方法来获取YouTube嵌入代码，并在其上方放置一张图片。当我点击这张图片时，它应该切换到YouTube并自动开始播放视频。这样我就可以避免人们在打开页面时看到那个丑陋的预览图像。

谢谢。

- jncunha

你看过jQuery的.replaceWith()函数吗？http://api.jquery.com/replaceWith/你可以使用它来放置一个带有你的图片的div，当点击时用Youtube播放器替换内容。 - cowcowmoomoo

我对jQuery不是很了解。我所需要的只是嵌入代码。你可以帮我写一下吗？：x - jncunha

1

看一下下面Pez的答案。那基本上就是我建议的代码版本。 - cowcowmoomoo

3个回答

3

如果视频被隐藏，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>

- Pez Cuckow

无法让它工作。我尝试将代码复制到我的HTML中，使用嵌入式<iframe>代码放置在<div> 中，为封面定义图像，但是无论我点击多少次，都没有任何反应。 - jncunha

由于某些奇怪的原因，即使用户没有点击链接，上述代码也会自动播放。我已经找到了更好的解决方案。现在添加它。 - LittleLebowski

这里还有一个不错的解决方案：http://orangecountycustomwebsitedesign.com/change-the-youtube-embed-image-to-custom-image/ - peter70

1

如果访问者的播放率很低，我建议采用一种方法，即在页面上只有 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

- Jeff Posnick

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- LittleLebowski · Accepted Answer

将带有图像的 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);
    });

对我来说，这个功能运行得非常好。