HTML5视频 - 如何无缝播放和/或循环播放多个视频？

如何可以无缝地可靠地连续播放多个视频？由于播放2个视频之间存在小的暂停或闪烁.

在我的特定示例中,我有3个视频.我需要一个接一个地无缝地播放所有3个,我还需要循环中间视频任意次数(比如说2或3).所有这些都需要在不同的浏览器中无缝且一致地发生.

我一直在尝试月球下的所有东西,从在视频结束时开始视频播放,到使用几个视频标签以及隐藏和替换它们,我甚至尝试在Flash中实现这一点,但是唉没有任何作用,并且在当前发生同样的问题Flash也是如此.

我已经多次看过这个(或类似的)问题,但我还没有看到可靠的解决方案.

有谁知道解决这个问题？

在尝试了各种各样的事情后,我终于能够创建一个似乎是一个有效的解决方案.我没有在旧浏览器或其他操作系统上测试过这个,但这适用于最新版本的Chrome,IE,Firefox和Opera.(虽然可以了解一些关于这是否适用于其他系统的反馈意见)

我们的想法是将所有3个视频输出帧输出到HTML5画布.原始视频会被隐藏并预先预加载,以避免加载之间的暂停.

这是代码:

var playCounter = 0;
var clipArray = [];

var $video1 = $("#video1");
var $video2 = $("#video2");
var $video3 = $("#video3");

$video1.attr("src", "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4");
$video2.attr("src", "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4");
$video3.attr("src", "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4");

var timerID;

var $canvas = $("#myCanvas");
var ctx = $canvas[0].getContext("2d");

function stopTimer() {
  window.clearInterval(timerID);
}

$('#startPlayback').click(function() {
  stopTimer();
  playCounter = $('#playbackNum').val();
  clipArray = [];

  // addd element to the end of the array
  clipArray.push(1);
  for (var i = 0; i < playCounter; i++) {
    clipArray.push(2);
  }
  clipArray.push(3);

  $video2[0].load();
  $video3[0].load();

  $video1[0].play();
});

function drawImage(video) {
  //last 2 params are video width and height
  ctx.drawImage(video, 0, 0, 640, 360);
}

// copy the 1st video frame to canvas as soon as it is loaded
$video1.one("loadeddata", function() {
  drawImage($video1[0]);
});

// copy video frame to canvas every 30 milliseconds
$video1.on("play", function() {
  timerID = window.setInterval(function() {
    drawImage($video1[0]);
  }, 30);
});
$video2.on("play", function() {
  timerID = window.setInterval(function() {
    drawImage($video2[0]);
  }, 30);
});
$video3.on("play", function() {
  timerID = window.setInterval(function() {
    drawImage($video3[0]);
  }, 30);
});

function onVideoEnd() {
  //stop copying frames to canvas for the current video element
  stopTimer();

  // remove 1st element of the array
  clipArray.shift();

  //IE fix
  if (!this.paused) this.pause();

  if (clipArray.length > 0) {
    if (clipArray[0] === 1) {
      $video1[0].play();
    }
    if (clipArray[0] === 2) {
      $video2[0].play();
    }
    if (clipArray[0] === 3) {
      $video3[0].play();
    }
  } else {
    // in case of last video, make sure to load 1st video so that it would start from the 1st frame 
    $video1[0].load();
  }
}

$video1.on("ended", onVideoEnd);
$video2.on("ended", onVideoEnd);
$video3.on("ended", onVideoEnd);

  
  
  
  

    
  
  

    

      
                    Times the middle video will repeat itself:
                
    
    

      
    
    

      Start