JavaScript - 如何一次播放多个视频？

Question

我有一个视频元素的数组，我希望同时播放这些元素。

我在网上找到的唯一可以做到这一点的方法是使用 new MediaController(); 但这似乎并不广泛/如果完全支持的话。

我期望做的是:

var videos = document.querySelectorAll('video');
var mc = new MediaController();
video.forEach(function(el) {
    el.controller = mc;
});
mc.play();

我发现这样做的唯一方法是在数组上执行 forEach 并一个接一个地播放它们，但我想知道是否有人知道是否有办法做到这一点，但您注意到播放时 video[0] 和 video[4] 之间存在轻微延迟。

是否有可能使用 JavaScript 使其变得无缝？

附言这只需要是一个 Webkit 解决方案，因为这实际上不是用于浏览器的东西，而是用于 UE4 游戏的前端。

Answer 1

我的假设是它们不会同时播放，因为它们是异步加载的。我建议等待所有视频的就绪状态，然后一个一个地播放。下面是一个示例，说明如何使用 Promise 实现这一目标。

// Get all videos.
var videos = document.querySelectorAll('video');

// Create a promise to wait all videos to be loaded at the same time.
// When all of the videos are ready, call resolve().
var promise = new Promise(function(resolve) {
  var loaded = 0;

  videos.forEach(function(v) {
    v.addEventListener('loadedmetadata', function() {
      loaded++;

      if (loaded === videos.length) {
        resolve();
      }
    });
  });
});

// Play all videos one by one only when all videos are ready to be played.
promise.then(function() {
  videos.forEach(function(v) {
    v.play();
  });
});

<video width="400" controls>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>

<video width="400" controls>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>

<video width="400" controls>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>