嘗試過各種各樣的事情后，我終于能夠創造出似乎是一個工作解決方案。我還沒有在舊版瀏覽器或其他操作系統上測試過這個版本，但是這個版本可以在最新版本的Chrome，IE，Firefox和Opera上運行。 (雖然更多反饋意見是否可以在其他系統上使用)

這個想法是讓所有3個視頻輸出幀到HTML5畫布。原始視頻被隱藏并預先加載以避免加載之間暫停。

下面是代碼：

HTML：

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

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

總結

以上是生活随笔為你收集整理的用html5播放两个视频,HTML5视频 - 如何进行无缝播放和/或几个视频循环？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。