Блог

У меня есть два медиа-элемента:

 <audio id="aud"></audio>
<video id="vid"></video>
  

Я прикрепил к ним обоим URL-адреса мультимедиа.

Затем я загружаю и воспроизводю их, выполняя audio.load() и video.load() , а затем audio.play() и video.play() в прослушивателе

 audio.load();
video.load();
video.addEventListener("canplay", () => {
    video.play();     
});
audio.addEventListener("canplay", () => {
    audio.play();     
});
  

Оба начинают загружаться, сначала загружается аудио, а загрузка видео занимает около 1-2 секунд.

Когда они действительно начнут воспроизводиться, зависит от того, когда событие «canplay» запускается каждым медиа-элементом. (который запускается после загрузки, выполняется как минимум для пары кадров)

что я хочу сделать, так это вызывать audio.play() AND video.play() вместе ТОЛЬКО тогда, когда canplay для них обоих запускается событие «». Как я могу этого добиться?

обратите внимание, что мне нужно использовать как аудио, так и видеоэлемент, и я пытаюсь добиться близкой, но не идеальной синхронизации при запуске.

вкратце: чего я хочу добиться, так это:

 audio.load();
video.load();

// when video can "canplay" and when audio can "canplay" ONLY then

video.play();   
audio.play();
  

Используйте глобальные флаги:

 let audCanPlay=false;
let vidCanPlay=false;

function audPlay() {
  audCanPlay=true;
  console.log("audCanPlay=true");
  if(vidCanPlay) playBoth();
}

function vidPlay() {
  vidCanPlay=true;
  console.log("vidCanPlay=true");
  if(audCanPlay) playBoth();
}

function playBoth() {
  console.log("audio.play();");
  console.log("video.play();");
}

/* commented for demonstration
audio.addEventListener("canplay", audPlay);
video.addEventListener("canplay", vidPlay);
audio.load();
video.load();
*/  

 <audio id="aud"></audio>
<button id="audBtn" onclick="audPlay()">Mimic Audio canplay</button>
<video id="vid"></video>
<button id="vidBtn" onclick="vidPlay()">Mimic Video canplay</button>  

Я думаю, что лучше добавить прослушиватели событий перед вызовом методов загрузки.
Я думаю, что лучше сделать это таким образом, вместо того, чтобы ждать завершения одного / canplay и только затем вызывать второе = экономит время / быстрее.

canplay На ум приходят обещания, разрешенные событиями и объединенные с Promise.all ожиданием нескольких событий.

Однако то, насколько сложной она должна быть, также зависит от того, насколько общей она должна быть. Для простого случая ожидания готовности к воспроизведению ровно одного видео и одного аудио я бы использовал только одно обещание и считал события по мере их поступления.

Обратите внимание, что для перехвата событий в элементах, которые извлекают файлы, небезопасно устанавливать src href атрибуты or перед добавлением прослушивателей событий.

Концептуальный код (непроверенный) для добавления слушателей, установки источников и возврата обещания, когда оба будут готовы:

 const loadAV = (video, vidSrc, audio, audioSrc, timeout) {
    let resolve, reject;
    const p = new Promise( (r,j) => { resolve = r, reject = j};
    let count = 0;
    let timer;

    const listenCanPlay = () => {
        if(   count == 2) {
            resolve();
            unListen();
        }
    };
    const unListen = () => {
        video.removeEventListener("canplay", listenCanPlay);
        audio.removeEventListener("canplay", listenCanPlay);
        if( timeout) {
            clearTimeout(timer);
        }
    };

    if( timeout) {
        timer = setTimeout( ()=> {
            if( count < 2) {
                unListen();
                reject( new Error(`loadAV timed out after ${timeout} msec`)
            }
        }, timeout);
    }
    video.addEventListener("canplay", listenCanPlay);
    audio.addEventListener("canplay", listenCanPlay);
    video.src = vidSrc;
    audio.src = audioSrc;
    return p;
}
  

который затем будет вызываться как

  loadAV( video, video_url, audio, audio_url, 15000)
 .then(()=>{ video.play(); audio.play()})
 .catch(err=> console.log(err));