HTML5視頻僅適用於IE。其他瀏覽器顯示黑屏

我必須開發一個可在所有主流瀏覽器（Chrome，Firefox，IE9，Safari和Opera）上運行的html5應用程序，並且其中一項要求是它能夠播放視頻。我使用的視頻標籤和2種不同的視頻格式，他們提供：HTML5視頻僅適用於IE。其他瀏覽器顯示黑屏

<video width="640" height="360" controls autoplay="autoplay"> 
    <source src="../videos/grafico.ogg" type="video/ogg"/> 
    <source src="../videos/grafico.mp4" type="video/mp4"/> 
    Your browser doesn't support video 
</video>

我的問題是這樣的只能運行在IE瀏覽器。在Chrome，Firefox和Opera上打開播放器，但圖像是黑色的。在Safari上只顯示「您的瀏覽器不支持視頻」消息。我也試過使用videojs，但黑屏問題依然存在。這是發生在本地的方式（我沒有訪問服務器）。

我不知道我在做什麼錯，也不知道如何處理視頻。有誰知道我該怎麼辦？

來源

2012-11-13 Catpixels

您的代碼工作對我來說在每一個當前的瀏覽器，你可以上傳你的代碼到測試服務器（或的jsfiddle？） –

我有最新的瀏覽器爲好，但顯然這是與文件 – Catpixels

首先，您需要首先放置MP4源。老年人的iPad上有一個問題，他們不會看清表中的第一個來源。

對於Chrome，Firefox和Opera，它可能是ogg文件本身的問題，也可能是服務器爲該文件發送的MIME類型。檢查以確保ogg將在其他地方播放，如VLC。

如果有，請將擴展名更改爲.ogv。這不應該有所作爲，但它更正確。然後將這些行添加到.htaccess文件中。這是從HTML5 Boilerplate。

# Audio 
AddType audio/mp4      m4a f4a f4b 
AddType audio/ogg      oga ogg 

# Video 
AddType video/mp4      mp4 m4v f4v f4p 
AddType video/ogg      ogv 
AddType video/webm      webm 
AddType video/x-flv     flv

這似乎是排名第一的原因OGG文件並不在HTML5視頻的人玩。

作爲一個方面說明，您可能還想考慮製作WebM文件或使用Ogg代替。它對質量比有更好的壓縮。您可以使用Firefogg.org免費製作WebM。

我看不出爲什麼IE瀏覽器會播放MP4，Safari瀏覽器不會，但希望這些問題也能解決。乾杯。

來源

2012-11-13 19:08:03 heff

我改變了文件的順序，確實解決了這個問題。我不需要使用htaccess（不管怎樣我都不能這樣做，在這種情況下它不會被使用）。謝謝你的幫助= D – Catpixels

<video width="320" height="240" controls="controls" autoplay="autoplay">

試試這種方法。在所有瀏覽器中針對我和作品進行了測試。

來源

2012-11-13 12:41:45 Brobina

的嘗試的順序有問題問題仍然存在（我認爲我有控件=「控件」，必須在測試過程中意外刪除它） – Catpixels

這是正確的代碼，所以它會工作。 '<！DOCTYPE html>'確保你的文檔類型。 – Brobina

這是我檢查的第一件事。 doctype是正確的 – Catpixels

HTML5視頻僅適用於IE。其他瀏覽器顯示黑屏

回答

相關問題