如何在加载后同时自动播放两个 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>

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

How to autoplay two HTML5 videos together after loading?

html

video

autoplay