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

---

啊，好吧，我想我明白了。所以基本上在我发布的例子中，我的资源数量应该是2。但我不明白的是如何同时扮演这两个角色。例如，一旦load事件触发，我从else语句中看到整数将增加，但它将如何检查回实际播放视频？它似乎只会增加整数，然后不做其他操作？当

if

语句为true（loaded==2）时，您可以在任意多的资源上执行

play

。此时，所有内容都已加载。或者我误解了你的问题？但是这个语句不是假的吗，默认为else，只是先运行loaded++？在它执行else之后，我们是否需要重新运行它以再次检查？好的，我们应该将loaded初始化为1，或者检查loaded是否等于RESOURCE_NUM-1。我将编辑答案。