尝试过各种各样的事情后，我终于能够创造出似乎是一个工作解决方案。我还没有在旧版浏览器或其他操作系统上测试过这个版本，但是这个版本可以在最新版本的Chrome，IE，Firefox和Opera上运行。 (虽然更多反馈意见是否可以在其他系统上使用)

这个想法是让所有3个视频输出帧到HTML5画布。原始视频被隐藏并预先加载以避免加载之间暂停。

下面是代码：

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源文件以使代码正常工作。