Загружайте видео и проигрывайте их одновременно

Question

Мне было интересно, как загрузить два или более видео или аудио файла одновременно, а затем подождать, пока они все будут готовы, прежде чем воспроизводить.однако в большинстве случаев это иногда может не дожидаться полной готовности обоих проигрывателей к воспроизведению (поскольку метод oncanplay привязан к разным источникам видео).Это, конечно, может вызвать проблемы, когда я хочу, чтобы несколько типов файлов были полностью синхронизированы.

function loadSources() {

  var videoOne = document.getElementById("first");
  videoOne.src = "first-video.mp4";

  var videoTwo = document.getElementById("second");
  videoTwo.src = "second-video.mp4";

  videoOne.oncanplay = function() {
    videoOne.play();
  };

  videoTwo.oncanplay = function() {
    videoTwo.play();
  };
} 

Как мне объединить несколько событий oncanplay в одно?

Answer 1

Один из способов сделать это - прослушать событие load для элементов и увеличить целое число при загрузке ресурсов.Это будет выглядеть примерно так:

const videoOne = document.getElementById("first");
let loaded = 0;
videoOne.addEventListener("load", () => {
    if (loaded === RESOURCE_NUM - 1) {  // resources required to be loaded
        // play the video / audio files
    }
    else {
        loaded++;
    }
});