如何（僞）流H.264視頻 - 在跨瀏覽器和HTML5的方式？

我想嵌入MP4視頻（H.264）的方式，應該跨瀏覽器工作，但使用HTML5，如果可以獲得更好的性能。只要我沒有提供WebM版本，Firefox應該回退到Flash。如何（僞）流H.264視頻 - 在跨瀏覽器和HTML5的方式？

問題：

火狐下載整個視頻開始播放，而Chrome和其他瀏覽器播放，同時還進行下載。

這就是我所做的：

<video poster="poster.jpg" preload="auto" autobuffer autoplay loop > 
    <source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> 
</video>

爲了實現Flash的後備我用jMediaElement：

jQuery(function(){ 
    jQuery('video').jmeEmbed(); 
});

我嘗試了一些替代jMediaElement，但我不得不隱藏控制和使用問題在Flash播放器中自動播放/循環播放。 jMediaElement使用JWplayer作爲後備，所有這些事情在視頻標籤中聲明時都有效。目前

dev的版本是：http://acn.lws-service.de/

視頻與MIME類型「視頻/ MP4」交付，因爲它應該。這個問題可能與JWplayer/jMediaElement有關 - 或者它可能是視頻（編碼）本身？

jMediaElement的一個替代方案仍然允許視頻自動播放，循環和隱藏控件，我們也將讚賞。

來源

2011-07-13 Matt

問題是您的視頻。您的視頻沒有原子moov數據，因此必須完全下載，才能使用閃光燈播放（無需漸進式下載）。有一個簡單的解決方案。有一個Adobe Air App，它應該在文件的開頭添加你的moov數據。

您可以下載它here。你可以找到更多的信息here。

關於您對標記進行的更改。你應該總是添加一個類型屬性。關於autobuffer和preload。 autobuffer確實不是HTML5 compilant，而是改爲預加載。 FF3.6確實支持autobuffer，但不能預加載，幸運的是jMediaElement會檢測到這一點，並且如果preload =「」/ preload =「auto」被附加，它會自動將autobuffer設置爲true。但是如果您使用自動播放功能，則會自動設置播放器的行爲以儘快下載視頻。循環也由jMediaElement歸一化，所以這裏沒有問題。你的HTML代碼應該是這樣的：

<video poster="poster.jpg" autoplay loop > 
    <source src="video.mp4" type="video/mp4" /> 
</video>

還是有點短：

<video poster="poster.jpg" src="video.mp4" type="video/mp4" autoplay loop ></video>

來源

2011-07-13 17:17:08

謝謝！使用此AIR應用程序（QTIndexSwapper2）處理完視頻後，一切正常。非常感謝html部分的澄清和簡化 - 因此畢竟（並且使用jme）html5視頻並不那麼複雜。 – Matt

我甚至找到了該AIR應用程序的PHP版本，但AIR應用程序對我的視頻效果不錯，但PHP腳本告訴我「moov-atom不在文件末尾，文件已準備就緒準備進行漸進式下載，或者這是一個無效的文件。「 - 所以我們似乎必須堅持使用AIR應用程序或使用編碼軟件，它有一個選項... – Matt

autobuffer不再是一個有效的屬性，它已被替換preload（設置爲none，metadata和auto）

loop當前未Firefox支持。

嘗試忽略source中的編解碼器聲明並查看它是如何工作的？

來源

2011-07-13 12:44:08

我刪除了編解碼器的聲明 - 和'autobuffer'參數 - 仍然是同樣的問題。我想，jwPlayer是要怪的... – Matt

如何（僞）流H.264視頻 - 在跨瀏覽器和HTML5的方式？

回答

相關問題