用图像覆盖可变的youtube嵌入式视频，单击时隐藏图像，无需硬编码jQuery即可自动播放

Jeroen 发表于 Dev

耶罗恩

我想在我的网站上观看youtube / vimeo视频之前先显示图片。有没有办法用jQuery或javascript做到这一点？

我想用我自己的图像覆盖它，单击后显示视频并自动播放，而无需重新加载页面。

图像和视频数据来自数据库，因此视频数据是可变的。我已经在此处找到类似的问题/答案：将YouTube嵌入式视频与图片叠加，单击并隐藏图片并自动播放

但是我的视频是可变的。还有其他方法可以更改自动播放值吗？

感谢您的帮助

问候耶隆

维尼

对于叠加图像，您可以简单地使用海报属性并为图像提供路径

<video id="myvid" autoplay controls poster="/overlay.jpg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
</video>

用于动态更改视频

var video = document.getElementById('myvid ');
var sources = video.getElementsByTagName('source');
sources[0].src = "http://example.com/new_url.mp4";
sources[1].src = "http://example.com/new_url.ogg";
video.load(); //reloads video without reloading page
video.play();

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。