我有一个array我希望同时播放的视频元素。
我在网上找到的唯一方法是使用new MediaController();但这似乎并没有得到广泛/如果有支持的话。
我期望做的是：
var videos = document.querySelectorAll('video');
var mc = new MediaController();
video.forEach(function(el) {
el.controller = mc;
});
mc.play();
我发现做到这一点的唯一方法是做forEach在阵列上并一个接一个地播放它们，但我想知道是否有人知道是否有办法做到这一点，但你注意到之间有轻微的延迟video[0] and video[4]玩的时候。
是否有可能使用 JavaScript 让这变得无缝？
附：这只需是一个 Webkit 解决方案，因为这并不是真正适用于浏览器的东西，而更多的是适用于 UE4 游戏的前端。
我的假设是它们不会立即播放，因为它们是异步加载的。我建议等待所有视频的就绪状态，然后一一播放。以下是如何使用 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
