HTML5 視頻 - 如何無縫播放和/或循環播放多個視頻？

Question

如何可靠地無縫地一個接一個地播放多個視頻？ 因為在播放 2 個視頻之間有一個小的停頓或閃爍。

在我的特定示例中，我有 3 個視頻。 我需要一個接一個地無縫播放所有 3 個視頻，並且我還需要將中間視頻循環播放任意次數（例如 2 或 3 次）。 所有這些都需要在不同的瀏覽器中無縫且一致地發生。

我一直在嘗試一切，從在視頻端開始視頻播放，到使用多個視頻標簽並隱藏和替換它們，我什至嘗試在 Flash 中實現它，但可惜沒有任何效果，同樣的問題發生在當前閃也。

我已經多次看到這個（或類似的）問題，但我還沒有看到可靠的解決方案。

有誰知道這個問題的解決方案？

Answer 1

在嘗試了各種事情之后，我終於能夠創建似乎是可行的解決方案。 我沒有在舊瀏覽器或其他操作系統上測試過這個，但這適用於最新版本的 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);

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <div id="border"> <video id="video1" width="640" height="360" hidden> <source type="video/mp4"> Your browser does not support playing this Video </video> <video id="video2" width="640" height="360" hidden> <source type="video/mp4"> Your browser does not support playing this Video </video> <video id="video3" width="640" height="360" hidden> <source type="video/mp4"> Your browser does not support playing this Video </video> <div> <canvas id="myCanvas" width="640" height="360"> </canvas> </div> <div role="controls"> <div> <label> Times the middle video will repeat itself: </label> </div> <div> <input id="playbackNum" value="1" /> </div> <p> <button id="startPlayback">Start</button> </p> </div> </div>

請注意，代碼不是很漂亮，可以從一些清理和優化中受益，但至少這應該顯示解決問題的方法，並在 HTML5 中實現多個視頻的無縫播放。 還要確保在 html 文件位置包含 jQuery 源文件，以便代碼工作。

Answer 2

我使用 VideoJS 已經有一段時間了，它允許無縫視頻播放。

http://videojs.com

為此，您將需要 jQuery。 還有許多其他 jQuery 視頻播放器。