連續播放視頻文件無延遲/視頻間緩衝

Question

是否可以在線播放由兩個或更多視頻文件組成的視頻？

由於我原來的帖子不夠清楚，下面是擴展的解釋和問題。

我的網站託管在Linux/Apache/PHP服務器上。我有FLV/F4V格式的視頻文件。如有必要，我還可以將它們轉換爲其他可用格式。所有視頻具有相同的寬高比和其他參數。

我想要的是構建（或使用，如果存在）在線視頻播放器播放由多個視頻文件實時串聯在一起，即當用戶點擊以查看視頻組成的視頻。

例如，訪問者來到我的網站，看到標題爲「歡迎」的視頻可用於播放。當他/她點擊播放該視頻時，我會拍攝視頻文件「Opening.f4v」，「Welcome.f4v」和「Ending.f4v」，並將它們一個接一個地連接/合併/連接以創建一個連續的視頻。

生成的視頻看起來像一個視頻，視頻部分之間沒有視覺線索，滯後甚至最小的可觀察延遲。基本上，做什麼是某種形式的即時編輯或預編輯，用戶可以看到結果。由此產生的視頻不會保存在服務器上，而是以實時方式進行組合和播放。

此外，如果可能的話，不應使用戶在他/她看到最終視頻之前等待此合併過程結束，而是要能夠立即獲取視頻的第一部分，同時合併同時完成。

這可能與Flash/actionscript，ffmpeg，html5或其他一些在線技術？我不需要解釋它是如何可能的，只是點頭說它是可能的，還有一些鏈接可以進一步調查。

另外，如果有一個選擇是使用閃光燈，當iphone/ipad訪問網站時，有什麼替代方案可以實現這一功能？

Answer 1

目前在某些瀏覽器上可以使用的方法，在大多數瀏覽器上都會使用HTML5視頻媒體源擴展機制。

這實質上允許您在HTML5頁面中爲動態src緩衝區替換靜態「src」文件，然後使用您自己的Javascript代碼以任意方式填充。

因此，您可以編寫代碼以便在第一個視頻結束時預先緩衝第二個視頻，然後立即開始在第一個視頻的最後一個包之後立即將第二個視頻的數據包添加到src。

在非常高的水平而言，這看起來像：

你的HTML插入視頻，你想在你的頁面：

. 
. 
. 
<div> 
    <video id="yourVideo1" controls="" autoplay="" width="320" height="240"></video> 
</div> 
. 
. 
. 

你的JavaScript，爲您的視頻提供源：

//Get the video element 
var videoElement = document.getElementById('yourVideo1'); 

//Create a 'MediaSource' and associate it with this video 
var mediaSource = new MediaSource(); 
video.src = window.URL.createObjectURL(mediaSource); 

//Add a listener to the MediaSource object to check for 
//the video been opened. In this function you can add your 
//code to get the get your videos from the servers and add 
//'chunks' to the media source buffer 

mediaSource.addEventListener('sourceopen', function(e) { 

    //Set the format of the source video 
    var mediaSourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"'); 

    //Get your video from the web 
    while (not the end of your video playlist) { 
    ... 
    //Stream video from server 
    ... 
    //Add packets received to the media source bufer 
    mediaSourceBuffer.appendBuffer(receivedVideoPackets); 

    //If near end of video start fetching next video to 
    //avoid buffering delay 
    ... 

    //If end of video go to next video in playlist 
    ... 

    } 


}, false); 

看看下面的HTML5 Rocks演示，看看這個在行動（稍微不同的用例）。

鑑於視頻操作的難度和衆多格式等，如果其中一個已建立的視頻播放器提供了開箱即用的功能，那麼對於您來說，這將更容易，因此我仍然會嘗試他們的論壇，如評論中所述，但至少你知道這在技術上是可行的。

的MSE規範可在這裏：

• http://w3c.github.io/media-source/

並有很好的介紹博客和演示是在這裏（請確保您的瀏覽器支持MSE - 最新版本的Chrome一樣）：

• http://updates.html5rocks.com/2011/11/Stream-video-using-the-MediaSource-API

你可以在這裏找到最新的瀏覽器支持：

• http://www.jwplayer.com/html5/mediasource/