javascript - 加载视频并同时播放

我想知道如何一次加载两个或多个视频或音频文件，然后等待它们全部准备好再播放。

我下面列出的当前方法似乎大部分都可以使用，但是，有时无法完全等待两者都准备就绪（因为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事件合并为一个？

最佳答案

一种方法是侦听元素上的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++;
    }
});