我有两个文件,一个是无音量的视频文件,另一个是音频。因此,我正在<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);