如何在加载后一起自动播放两个HTML5视频？

Question

我正在尝试同时准确播放两个HTML5视频。换句话说，在这些视频都加载之前，我可以阻止它们播放吗？

我不想让一个开始播放而第二个仍在加载。我希望这是有道理的。

Answer 1

您可以使用'onloadeddata'功能检查两者是否都已加载，然后同时启动它们。我认为，同步的精确度完全取决于浏览器和JavaScript引擎的实现，但是只要您不担心毫秒同步，就可以通过快速测试来完成同步。

请参见下面的示例。

var vid1 = document.getElementById("MyVid1");
var vid2 = document.getElementById("MyVid2");

var vid1Ready = false
var vid2Ready = false

vid1.onloadeddata = function() {
    if (vid2Ready == true) {
      vid1.play()
      vid2.play()
    } else {
      vid1Ready = true
    }
};

vid2.onloadeddata = function() {
    if (vid1Ready == true) {
      vid1.play()
      vid2.play()
    } else {
      vid2Ready = true
    }
};

<video id="MyVid1" width="320" height="176" controls preload="auto">
  <source src="http://ftp.nluug.nl/pub/graphics/blender/demo/movies/ToS/tears_of_steel_720p.mov" type="video/mp4">
  Your browser does not support this video format
</video>

<video id="MyVid2" width="320" height="176" controls preload="auto">
  <source src="http://peach.themazzone.com/durian/movies/sintel-1024-surround.mp4" type="video/mp4">
  Your browser does not support this video format
</video>