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

请注意,代码不是很漂亮,并且会受益于一些清理和优化,但至少这应该显示解决问题的方法,并在HTML5中实现几个视频的无缝播放.还要确保在html文件位置包含jQuery源文件以使代码生效.