在 html5 / js 中完美同步播放多個視頻

Question

我有一個標准的 html 5 前端，javascript 后端設置。 我需要同步播放 8 個視頻。

問題是，它是一個音樂網站，所以視頻必須完全同步播放。 我有 8 個視頻播放器，我等待每個視頻的canplaythrough事件，然后循環播放器（項目）以使用item.play()開始視頻：

if(videosStillBuffering == 0){
    if(!videosHavePlayed){
        videosHavePlayed = true;
        videoContainerArray.forEach(function(item) {
    item.currentTime = 0;
 });
    }
     videoContainerArray.forEach(function(item) {
    item.play();
 });

但是視頻不會完全同時播放，時間差不到半秒左右。 那還是太多了。 有沒有辦法向網站解釋，視頻必須一起播放，或者有沒有辦法至少進一步減少視頻之間的差異？ 比如，給視頻異步播放命令？

這是js源碼：

const videoContainerCollection = document.getElementsByClassName('video-container');
const videoContainerArray = [...videoContainerCollection];
const playPauseButton = document.getElementById('playPause');

var shouldPlay = false;
var playPauseButtonSaysPlay = true;
var videosHavePlayed = false;

playPauseButton
    .addEventListener('click', function () {
       if(playPauseButtonSaysPlay){
             shouldPlay = true;
                 playIfBuffered();
       } else {
             shouldPlay = false;
             pause();
                 playPauseButton.className = playPauseButton.className.replace( /(?:^|\s)blue(?!\S)/g , 'green' );
                 playPauseButton.innerHTML = "Play";
                 playPauseButtonSaysPlay = true;
         }
}, true);

videoContainerArray.forEach(function(item) {
    item.addEventListener('canplaythrough', (event) => {
        console.log("canplaythrough " );
        if(shouldPlay){
             playIfBuffered();
        }
});
});

videoContainerArray.forEach(function(item) {
    item.addEventListener('waiting', (event) => {
            console.log("waiting " );
        if(shouldPlay){
            playIfBuffered();
     }
});
});

function checkReady() {
    var countReady = 0;
    videoContainerArray.forEach(function(item) {
        if ( item.readyState >= 3 ) {   // it's loaded
            countReady++;
        }
    });
    return countReady;
}

function playIfBuffered() {
    const videosStillBuffering = videoContainerArray.length - checkReady()
    if(videosStillBuffering == 0){
        if(!videosHavePlayed){
            videosHavePlayed = true;
            videoContainerArray.forEach(function(item) {
        item.currentTime = 0;
     });
        }
         videoContainerArray.forEach(function(item) {
        item.play();
     });
         playPauseButton.innerHTML = "Pause";
         playPauseButton.className = playPauseButton.className.replace( /(?:^|\s)green(?!\S)/g , 'blue' );
         playPauseButtonSaysPlay = false;
    } else {
        pause();
        playPauseButton.className = playPauseButton.className.replace( /(?:^|\s)green(?!\S)/g , 'blue' );
        playPauseButton.innerHTML = videosStillBuffering + " of " + videoContainerArray.length + " vidoes are buffering. Please Wait.";
    }
}

function pause() {
    videoContainerArray.forEach(function(item) {
           item.pause();
    });
}

document.getElementById('stop')
    .addEventListener('click', function () {
        shouldPlay = false;
        playPauseButtonSaysPlay = true;
        playPauseButton.innerHTML = "Play";
        playPauseButton.className = playPauseButton.className.replace( /(?:^|\s)blue(?!\S)/g , 'green' );
        videoContainerArray.forEach(function(item) {
            item.pause();
            item.currentTime = 2;
     });
     videosHavePlayed = false;
    }, false);

videoContainerArray.forEach(toggleMute);
function toggleMute(item, index) {
  item.addEventListener('click', function() {
    if (item.muted === true) {
      item.muted = false;
      item.style.opacity = "1";
      item.style.filter  = 'alpha(opacity=100)'; // IE fallback
    }
    else if (item.muted === false) {
      item.muted = true;
      item.style.opacity = "0.5";
      item.style.filter  = 'alpha(opacity=50)'; // IE fallback
    }
  });
}
}

Answer 1

答案是如果視頻的當前時間距離第一個視頻的時間超過 0.1 秒，則每 500 毫秒檢查一次所有視頻。 如果是，將視頻的當前時間設置為第一個視頻的當前時間：

setInterval(
    function(){
          videoContainerArray.forEach(function(item) {
          var currentTime = videoContainerArray[0].currentTime;
          var videoTime = item.currentTime;
              if (Math.abs(currentTime - videoTime) > 0.1) {
                  item.currentTime = currentTime;
              }
     });        
}, 500);

我實際上認為視頻的同步性在我們的案例中不是問題，其中一個視頻可能只是剪錯了:(