Question

我尝试在html5网页项目中完全同步三个元素。为确保视频下载不会发生变化，我将属性preload =＆＃34; auto＆＃34;视频元素。

我的脚本如下：

    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）暂停/播放事件后保持同步视频元素

1 个答案: