覆盖变量youtube嵌入视频与图像，单击时隐藏图像和自动播放没有硬编码的jQuery

Question

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

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

图像和视频数据来自数据库，因此视频数据是可变的。我已经在这里找到了类似的问题/ Anwser： Overlay youtube embedded video with image, hide image when clicked and autoplay

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

感谢您的帮助

关心Jeroen

Answer 1

对于叠加图像，您只需使用海报属性并为图像指定路径

<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();