如何保持同步视频元素，尤其是在 (html5/javascript) 中的 pause/play 事件之后

Question

我尝试在 html5 网页项目中使三个元素完全同步。为了确保不会因视频下载而发生偏移，我将属性 preload="auto" 放到视频元素中。

我的脚本如下：

    var run = document.getElementById("run"); //run is a button element
    var vid = document.getElementById("video1"); // the first video element

    function PlayVideo() {
        if (vid.paused) {
            vid.play();
            run.textContent = "||";
        } else {
            vid.pause();
            run.textContent = ">";
        }       
    } // The PlayVideo() function is called onclick on the run button

    $('#video1').on('play', ambiance = function(){
    document.getElementById("video2").play();
    document.getElementById("video3").play();       
    });

    $('#video1').on('pause', ambiance = function(){
    document.getElementById("video2").pause();
    document.getElementById("video3").pause();      
    });

在等待几秒钟以完全加载视频文件后使用这段脚本时，运行按钮正确播放第一个视频，其他两个开始同步。但是当我第二次按下运行按钮时，只有第一个视频停止，另外两个视频在 2 或 3 秒内继续播放（两者都同步但不与第一个视频同步）。

你能帮帮我吗？是否有其他方式（更优雅）来播放同步视频？

最后一个要素：三个视频的来源是一样的。（每个元素播放相同的视频）。

谢谢

Answer 1

尝试这样的事情：

var videos = document.querySelectorAll('video');

function playAll() {
  [].forEach.call(videos, function(video) {
     video.play()
  });
}

function pauseAll() {
  [].forEach.call(videos, function(video) {
     video.pause()
  });
}

// this keeps everything synchronized
[].forEach.call(videos, function(video) {
  video.addEventListener('play', playAll, false);
  video.addEventListener('pause', pauseAll, false);
});

请记住，可能仍然会有轻微的偏移（如果你有声音，它听起来会失真）

如何保持同步视频元素，尤其是在 (html5/javascript) 中的 pause/play 事件之后

How to keep synchronized video element especially after pause/play event in (html5/javascript)

html

javascript

jquery

html5-video