JavaScript - Wie kann ich mehrere Videos gleichzeitig abspielen?

Question

Ich habe eine Videoelemente, die ich gleichzeitig spielen möchte.

Der einzige Weg, den ich online gefunden habe, dass ich das tun könnte, wäre new MediaController(); zu verwenden, aber das scheint nicht weit/wenn überhaupt unterstützt.

Was ich erwartet hatte war zu tun ist:

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

Der einzige Weg, die ich gefunden habe, dies zu tun, ist eine forEach auf dem Array zu tun und sie einen nach dem anderen zu spielen, aber ich frage mich, ob jemand weiß, wenn es eine Möglichkeit gibt, dies zu tun, aber Sie bemerken eine leichte Verzögerung zwischen und video[4] beim Spielen.

Ist es überhaupt möglich, dies mit JavaScript zu erreichen?

P.S. Dies muss nur eine Webkit-Lösung sein, da dies nicht wirklich etwas für einen Browser ist, sondern mehr für ein Frontend für ein UE4-Spiel.

Answer 1

Meine Hypothese ist, dass sie nicht gleichzeitig spielen, weil sie asynchron laden. Ich würde vorschlagen, auf den fertigen Zustand aller Videos zu warten und sie dann nacheinander abzuspielen. Hier ist ein Beispiel, wie Sie dies mit Promise erreichen können.

// 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>