运行 2 html 视频同时并排JS

Question

我想同时播放 2 个 html 视频（并排）。

我制作了一个按钮，上面有一个 click EventListener。这个监听器触发了 2 <video> 标签来播放它，但我认为在第二个 play 触发时有 150 ms 延迟。

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个视频几乎一样，除了第一个视频大小约为12MB，另一个约为20MB

我试过的：

尝试添加一个 console.time('video') 可以记录每个 play 函数调用之间的延迟，但在每个环境中可能不同。

Answer 1

我也会在这里添加这个 link，因为很明显有人遇到了非常相似的问题，尽管有音频

您似乎正在寻找此事件侦听器 "canplaythrough"，请在 link 中查看更多信息。

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

Answer 2

我知道同步播放视频的唯一方法是发出自定义事件以在 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 3

更新

两个答案都正确。我不知道的是，其中一个视频文件有声音，而另一个没有。这导致了 150 毫秒的延迟。

用 ffmpeg 解决了它。创建一个带有声音的 .mp3 文件（并用 <audio> 播放），以及 2 个 .mp4 没有声音的文件。他们现在正在同一时间演奏。

运行 2 html 视频同时并排JS

run 2 html video side by side at the same time JS

html

javascript

html5-video