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

问题描述

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

I have an array of video elements that I wish to play at the same time.

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

The only way I've found online that I could do this would be to use new MediaController(); but that doesn't seem widely/if at all supported.

我期望做的是:

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

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

The only way I've found to do this is doing a forEach on the array and playing them one after another, but I was wondering if anyone know if there might be a way to do this, but you notice a slight delay between video[0] and video[4] when playing.

使用JavaScript甚至有可能使它变得毫无道理吗?

Is it even possible to get this to be seemless with JavaScript?

P.S.这只需要成为Webkit解决方案，因为对于浏览器而言，它并不是真正的东西，而对于UE4游戏的前端来说，则更多.

P.S. This'll only need to be a Webkit solution as this isn't really something for a browser, but more for a front end for a UE4 game.

推荐答案

我的假设是，由于它们异步加载，它们不能一次播放.我建议等待所有视频的就绪状态，然后一一播放.这是一个如何通过Promise实现此目标的示例.

My hypothesis is that they don't play at once because they are loading asynchronously. I would suggest to wait for ready state of all videos and then play them one by one. Here is an example of how you can achieve this with 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>

这篇关于JavaScript-如何一次播放多个视频?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！