HTML5視頻和降級？

我一直在玩弄HTML5視頻標籤，並且當您無法支持編解碼器時，我對如何最好地降級感到困惑？HTML5視頻和降級？

對於舊的瀏覽器（或IE）不支持視頻標記的這一切很是直截了當：

<video width="320" height="240"> 
    <source src="vid.ogv" type='video/ogg'> 
    <source src="vid.mp4" type='video/mp4'> 
    <object> 
    <!-- Embed Flash video here to play mp4 --> 
    <object> 
</video>

他們都將落空，並會收到Flash版本（或其他替代如一個圖像！）

如何當瀏覽器不支持標籤而不是編解碼器 - 比如FireFox 3.5 - 並且我不支持OGG（可能是因爲我已經擁有大量的H.264檔案）：

<video width="320" height="240"> 
    <source src="vid.mp4" type='video/mp4'> 
    <object> 
    <!-- Embed Flash video here to play mp4 --> 
    <object> 
</video>

我在FireFox 3.5中獲得的是一個帶有x的灰盒子。這對FireFox用戶來說並不是一個很好的用戶體驗！我只能想到使用JavaScript來檢查FF3.5並更改DOM！這真的是一個糟糕的老一遍！ ...還是有一部分規格我錯過了像'novideo'標籤？

來源

2009-12-14 ad rees

重申一下在底部有評論說：如果指定了正確的MIME類型的OGG源Firefox將只回退到Flash視頻。 – BumbleB2na 2011-07-15 17:30:35

優雅退化的一個重要組成部分是查詢功能......深入研究HTML5是一個很好的閱讀...特別是，看看video section。相關代碼在這裏：

function supports_h264_baseline_video() { 
    if (!supports_video()) { return false; } 
    var v = document.createElement("video"); 
    return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"'); 
}

注：這確實需要DOM檢查，但對能力，而不是瀏覽器的簽名。這是正確的事情要做 :-)

一旦你知道瀏覽器是否可以支持，你可以顯示你的視頻標籤或拉起一個燈箱或重定向，只要你認爲合適。

來源

2009-12-15 00:00:09 r00fus

這比檢查瀏覽器簽名肯定要好，但它仍然比我從新標準中希望的要多一點JavaScript ...... – 2009-12-15 12:04:05

同意，這很不幸。由於HTML沒有分支概念，所以我在這裏看不到javascript。現有的非腳本方法依賴於連續兼容性層，但HTML5視頻由於編解碼器分裂而失敗，因爲這會對編程語言產生影響。 – r00fus 2009-12-15 17:26:33

請注意，這不適用於Android，它不能正確支持canPlayType方法。 – 2011-03-02 19:19:44

Video for Everybody的test page表示Firefox 3.5只能播放OGG。如果您不想添加OGG，您可能需要添加Flash版本。 VfE也不使用JavaScript，因此可能值得深入研究。要解決這個問題

來源

2010-10-08 10:50:22

VfE仍然需要OGG版本，因爲如果您沒有OGG版本，Firefox不會默認使用Flash版本或其他任何內容。 – 2010-10-09 17:57:26

一個真正的好方法是使用近代化JS library.Its很容易使用和quick.It可以在用戶的瀏覽器HTML5檢查功能。點擊這裏查看網站：http://www.modernizr.com/

來源

2011-03-27 21:19:18 Jaseem

這肯定是一個很好的解決方案，但我的問題是關於在支持HTML 5的瀏覽器中使用標記 – 2011-03-30 08:45:55

HTML5視頻和降級？

回答

相關問題