如何向 Firefox 3.6 提供 OGG 视频，向 Firefox 4 提供 WEBM 视频？

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。
尝试在 标记上指定 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）的浏览器。

浏览器将从顶部开始搜索并加载它们支持的第一个，但正如我刚才概述的那样，排序确实有其他含义。如果浏览器不支持，它就会跳过该格式。