Sycn аудио и видео в html5 javascript

Question

У меня есть два файла, один из которых - это видеофайл без громкости, а другой - аудио. Поэтому я запускаю эти два файла в тегах <audio> и <video>. Я хочу, чтобы, когда оба файла готовы к воспроизведению, воспроизведение видео в противном случае ждет, пока оба не смогут играть. Итак, что я использовал для этого.
canPlay не подходит для меня, потому что он может проверять только один из них за раз.
Благодаря

UPDATE

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

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

Я стараюсь это, но это не работает, потому что всякий раз, когда один из них работает ли он играть как без заботы о другой, потому что есть play() для них обоих.

Answer 1

Слушайте canplaythrough событие обоих элементов, и если оба can, триггер .play() на обоих элементах.

canplaythrough события вызывается, когда агент пользователя может играть СМИ, и считает, что достаточное количество данных были загружены, чтобы играть в среду вплоть до конца без остановки для дальнейшей буферизации контента.

Попробуйте это:

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

Edit: Вы можете достичь того же, используя обещание.

Попробуйте это:

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