如何將 OGG 視頻提供給 Firefox 3.6 並將 WEBM 視頻提供給 Firefox 4？

Question

我的代碼如下所示：

<video>
<source src="movie.webm" type="video/webm" />   
<source src="movie.ogv" type="video/ogg" />
</video>

或者，像這樣：

<video>
<source src="movie.ogv" type="video/ogg" />
<source src="movie.webm" type="video/webm" />   
</video>

如果我首先列出 webm 源，Firefox 4 會播放它，但 Firefox 3.6 也會嘗試播放它（但失敗了，因為它不支持 webm）。

相反，如果我先列出ogg源，兩個版本都播放它，所以webm版本沒用。

有沒有辦法（沒有瀏覽器嗅探）讓 Firefox 4 忽略 ogg 和/或 Firefox 3.6 忽略 webm？

第二個問題 - 由於 ogg 在兩個版本中都有效，使用 webm 實際上有什么好處嗎？

Answer 1

Firefox 3.6應該知道它不能播放你的WebM。 嘗試在<source>標簽上指定codecs ：

<video poster="movie.jpg" controls>
        <source src='movie.webm' type='video/webm; codecs="vp8.0, vorbis"'>
        <source src='movie.ogv' type='video/ogg; codecs="theora, vorbis"'>
        <source src='movie.mp4' type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
        <p>This is fallback content</p>
</video>

Answer 2

源元素有一個首選順序：

1. mp4 - iPad 如果未首先列出其支持的格式，則播放視頻時會出現問題。 確保 mp4 排在第一位。
2. webm - webm 比 ogg 質量更高，因此如果按此順序列出，同時支持兩者的瀏覽器將首先選擇 webm。
3. ogg - 最后列出這個以涵蓋不支持 webm（或者，顯然是 mp4）的瀏覽器。

瀏覽器將從頂部搜索並加載它們支持的第一個，但正如我剛剛概述的那樣，排序確實有其他含義。 如果瀏覽器不支持它，它只是跳過格式。