자바 스크립트 - 한 번에 여러 동영상을 재생하려면 어떻게해야합니까?

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] 사이에 약간의 지연이 있음을 알 수 있습니다.

자바 스크립트를 사용하면 아무렇지 않을 수도 있나요?

P. 이것은 웹킷 솔루션 일 필요가 있습니다. 브라우저 용으로는 아니지만 UE4 게임의 프론트 엔드에 대한 것입니다.

Answer 1

내가 가설은 비동기 적으로로드되기 때문에 한 번에 재생되지 않는다는 것입니다. 모든 동영상의 준비 상태를 기다린 다음 하나씩 재생하는 것이 좋습니다. 다음은 약속을 통해이를 달성 할 수있는 방법의 예입니다.

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