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" />
  </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视频播放器。

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

2 个答案: