html让视频自动循环播放,javascript – HTML5视频 – 如何进行无缝播放和/或循环播放多个视频？...

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

Your browser does not support playing this Video

Your browser does not support playing this Video

Your browser does not support playing this Video

Times the middle video will repeat itself:

Start

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