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

Question

如何可靠地无缝地一个接一个地播放多个视频？因为播放 2 个视频之间有一个小的停顿或闪烁。

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

我一直在尝试一切，从在视频端开始视频播放，到使用多个视频标签并隐藏和替换它们，我什至尝试在 Flash 中实现这一点，但是没有任何效果，同样的问题也发生在当前的 Flash 中。

我已经多次看到这个（或类似的）问题，但我还没有看到可靠的解决方案。

有人知道解决办法吗？

Answer 1

在尝试了各种方法后，我终于能够创建似乎可行的解决方案。我没有在旧版浏览器或其他操作系统上测试过这个，但这适用于最新版本的 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);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="border">
  <video id="video1" width="640" height="360" hidden>
            <source type="video/mp4">
            Your browser does not support playing this Video
        </video>
  <video id="video2" width="640" height="360" hidden>
            <source type="video/mp4">
            Your browser does not support playing this Video
        </video>
  <video id="video3" width="640" height="360" hidden>
            <source type="video/mp4">
            Your browser does not support playing this Video
        </video>
  <div>
    <canvas id="myCanvas" width="640" height="360"> </canvas>
  </div>
  <div role="controls">
    <div>
      <label>
           Times the middle video will repeat itself:
      </label>
    </div>
    <div>
      <input id="playbackNum" value="1" />
    </div>
    <p>
      <button id="startPlayback">Start</button>
    </p>
  </div>
</div>

请注意，代码不是很漂亮，可以从一些清理和优化中受益，但至少这应该显示解决问题的方法，并在 HTML5 中实现多个视频的无缝播放。 还要确保在 html 文件位置包含 jQuery 源文件以使代码正常工作。

Answer 2

我使用 VideoJS 有一段时间了，它可以无缝播放视频。

http://videojs.com

为此，您将需要 jQuery。还有很多其他的 jQuery 视频播放器。