javascript - 加载视频并同时播放

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++;
    }
});