запускать 2 html видео одновременно JS

Question

Я хотел бы воспроизводить 2 html-видео точно одновременно (бок о бок).

Я сделал кнопку, на которой есть click EventListener. Этот слушатель запускает тег 2 <video>, чтобы воспроизвести его, но я думаю, что 150 ms задержка при втором триггере play.

index.html

<section>
    <video src="source1" id="video1"></video>
    <video src="source2" id="video2"></video>
    <button id="play">Play</button>
</section>

и вот основной script.js файл.

    const $video1 = document.getElementById('video1');
    const $video2 = document.getElementById('video2');
    const $play = document.getElementById('play');

    const playVideo = () => {
        $video1.play();
        $video2.play();
    };

    $play.addEventListener('click', playVideo);

Эти 2 видео почти одинаковы, за исключением того, что первый размер видео составляет около 12 МБ , а другой около 20MB

То, что я пробовал:

Попытка добавить console.time('video'), который может регистрировать задержку междукаждый play вызов функции, но он может быть разным в каждой среде.

Answer 1

Единственный способ, которым я знаю о воспроизведении видео в синхронизации, - это генерировать пользовательское событие для синхронизации видео в requestAnimationFrame:

var videos = {
    a: Popcorn("#a"),
    b: Popcorn("#b"),
  },
  scrub = $("#scrub"),
  loadCount = 0,
  events = "play pause timeupdate seeking".split(/\s+/g);

// iterate both media sources
Popcorn.forEach(videos, function(media, type) {

  // when each is ready... 
  media.on("canplayall", function() {

    // trigger a custom "sync" event
    this.emit("sync");

    // set the max value of the "scrubber"
    scrub.attr("max", this.duration());

    // Listen for the custom sync event...    
  }).on("sync", function() {

    // Once both items are loaded, sync events
    if (++loadCount == 2) {

      // Iterate all events and trigger them on the video B
      // whenever they occur on the video A
      events.forEach(function(event) {

        videos.a.on(event, function() {

          // Avoid overkill events, trigger timeupdate manually
          if (event === "timeupdate") {

            if (!this.media.paused) {
              return;
            }
            videos.b.emit("timeupdate");

            // update scrubber
            scrub.val(this.currentTime());

            return;
          }

          if (event === "seeking") {
            videos.b.currentTime(this.currentTime());
          }

          if (event === "play" || event === "pause") {
            videos.b[event]();
          }
        });
      });
    }
  });
});

scrub.bind("change", function() {
  var val = this.value;
  videos.a.currentTime(val);
  videos.b.currentTime(val);
});

// With requestAnimationFrame, we can ensure that as 
// frequently as the browser would allow, 
// the video is resync'ed.
function sync() {
  if (videos.b.media.readyState === 4) {
    videos.b.currentTime(
      videos.a.currentTime()
    );
  }
  requestAnimationFrame(sync);
}

sync();

html{font-family:arial;}

<script src="https://static.bocoup.com/js/popcorn.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<video height="180" width="300" id="a" controls> 
<source src="https://videos.mozilla.org/serv/webmademovies/popcorntest.mp4"></source>
<source src="https://videos.mozilla.org/serv/webmademovies/popcorntest.ogv"></source>
<source src="https://videos.mozilla.org/serv/webmademovies/popcorntest.webm"></source>
</video>
<video height="180" width="300" id="b"> 
<source src="https://videos.mozilla.org/serv/webmademovies/popcorntest.mp4"></source>
<source src="https://videos.mozilla.org/serv/webmademovies/popcorntest.ogv"></source>
<source src="https://videos.mozilla.org/serv/webmademovies/popcorntest.webm"></source>
</video>

<input type="range" value="0" id="scrub" />

Ссылка: https://bocoup.com/blog/html5-video-synchronizing-playback-of-two-videos

Answer 2

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

Функция запуска после загрузки звука

Похоже, выищите это событие слушатель "canplaythrough", проверьте больше в ссылке.

function checkAudio() {
  audioElem.setAttribute("src", audioFile);
  audioElem.addEventListener('canplaythrough', (event) => {
    resultScreen.innerHTML = "loaded audio";
  });
}

Answer 3

ОБНОВЛЕНИЕ

Оба ответа были правильными. Что я не знал, что один из видеофайлов имеет звук, а другой нет. Это вызвало задержку 150 мс.

Решено с помощью ffmpeg. Создайте файл .mp3 со звуком (и воспроизведите его с <audio>) и 2 .mp4 файлы без звука. Сейчас они играют ровно в одно и то же время.