HTML5视频 - 如何无缝播放和/或循环播放多个视频？ [英] HTML5 Video - How to do a seamless play and/or loop of several videos?
问题描述
如何可靠地一个接一个地可靠地播放多个视频？由于播放2个视频之间存在小的暂停或闪烁。
How can I reliably play several videos one after another seamlessly? As there is a small pause or flicker between playing 2 videos.
在我的特定示例中，我有3个视频。我需要一个接一个地无缝地播放所有3个，我还需要循环中间视频任意次数（比如说2或3）。所有这些都需要在不同的浏览器中无缝且一致地发生。
In my particular example I have 3 videos. I need to play all 3 of them seamlessly one after another, and I also need to loop middle video an arbitrary number of times (say 2 or 3). All of that needs to happen seamlessly and consistently across different browsers.
我一直在尝试月球下的所有内容，从在视频结束时开始视频播放到使用多个视频标签，隐藏和替换它们，我甚至试图在Flash中实现这一点，但唉没有任何作用，同样的问题也发生在当前的Flash中。
I've been trying everything under the moon, from starting video playback on video end, to using several video tags and hiding and replacing them, I even tried to implement this in Flash, but alas nothing works, and the same problem happens in current Flash as well.
我已经多次询问此（或类似）问题，但我还没有看到可靠的解决方案。
I've seen this (or similar) question asked many times but I haven't seen a reliable solution yet.
有没有人知道这方面的解决方案？
Does anyone know a solution to this?
推荐答案
在尝试了各种各样的事情后，我终于能够创造出似乎成为一个有效的解决方案我没有在旧浏览器或其他操作系统上测试过这个，但这适用于最新版本的Chrome，IE，Firefox和Opera。 （虽然对其是否适用于其他系统的一些更多反馈表示赞赏）
After trying various things I have finally been able to create what seems to be a working solution. I haven't tested this on older browsers or other OSes, but this works on latest versions of Chrome, IE, Firefox and Opera. (Although some more feedback of whether this works on other systems would be appreciated)
我们的想法是将所有3个视频输出到HTML5画布。原始视频会被隐藏并预先预加载，以避免加载之间的暂停。
The idea is to have all 3 videos output frames to HTML5 canvas. The original videos are hidden and preloaded in advance to avoid pause between loading.
以下是代码：
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="jquery-1.10.2.js"></script>
<script src="site.js"></script>
</head>
<body>
<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>
</body>
</html>
site.js
"use strict"
$(function () {
var playCounter = 0;
var clipArray = [];
var $video1 = $("#video1");
var $video2 = $("#video2");
var $video3 = $("#video3");
$video1.attr("src", "video/video1.mp4");
$video2.attr("src", "video/video2.mp4");
$video3.attr("src", "video/video3.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);
});
请注意，代码不是很漂亮，可以从一些清理和优化中受益，但至少这应该显示解决问题的方法，并在HTML5中实现几个视频的无缝播放。
还要确保在html文件位置包含jQuery源文件以使代码生效。
Please note, the code is not very pretty and would benefit from some cleanup and optimization, but at least this should show the way to work around the problem and implement a seamless playback of several videos in HTML5. Also make sure to include jQuery source file in html file location for the code to work.
这篇关于HTML5视频 - 如何无缝播放和/或循环播放多个视频？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
