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

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

下面是代碼：

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);

});

請(qǐng)注意，代碼不是很漂亮，會(huì)從一些受益清理和優(yōu)化，但至少應(yīng)該顯示解決問(wèn)題和實(shí)施的方法在HTML5中無(wú)縫播放多個(gè)視頻。 還要確保在html文件位置包含jQuery源文件以使代碼正常工作。

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。