JavaScript - 如何同时播放多个视频？

Question

我有一个array希望同时播放的视频元素。

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

我期望做的是：

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

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

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

PS 这只需要是一个 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>