我有两个文件,一个是无音量的视频文件,另一个是音频。因此,我正在<audio><video>标记中运行这两个文件。我希望当两个文件都准备好播放时,然后再播放视频,否则请等到两个文件都无法播放。因此,我为此使用了什么。canPlay对我来说效果不佳,因为它一次只能检查其中一个。
谢谢

更新

  audio.addEventListener('canplay',function(){
    audio.play();
    video.play();
  });

  video.addEventListener('canplay',function(){
    audio.play();
    video.play();
  });

我尝试了一下,但是这种方法不起作用,因为无论何时运行它们中的一个,它们都会在不关心另一个的情况下播放它们,因为它们两个都有play()

最佳答案

侦听两个元素的 canplaythrough 事件,如果同时监听can,则在两个元素上触发.play()



试试这个:

var audioCan = false,
  videoCan = false;
audio.addEventListener('canplaythrough', function() {
  audioCan = true;
  playAll();
});

video.addEventListener('canplaythrough', function() {
  videoCan = true;
  playAll();
});

function playAll() {
  if (audioCan && videoCan) {
    audio.play();
    video.play();
  }
}

编辑:您可以使用promise实现相同的功能。

试试这个:

var audioLoaded = new Promise(function(resolve) {
  audio.addEventListener('canplaythrough', function() {
    resolve();
  });
});
var videoLoaded = new Promise(function(resolve, reject) {
  video.addEventListener('canplaythrough', function() {
    resolve();
  });
});

function playAll() {
  audio.play();
  video.play();
}
Promise.all([audioLoaded, videoLoaded]).then(playAll);

09-10 13:06
查看更多