JavaScript - 一度に複数の動画を再生するにはどうすればよいですか？

Question

私は同時に再生したいビデオ要素のarrayを持っています。

オンラインで私がこれを行うことができる唯一の方法は、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でもシンプルにすることは可能ですか？

P.S.これはブラウザ用のものではなく、UE4ゲームのフロントエンド用のものであるため、Webkitソリューションである必要があります。

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>