firefox - HTML5 视频和降级？

Question

我一直在玩弄 HTML5 video 标签，我对在不支持编解码器时如何最好地降级感到困惑？

对于根本不支持视频标签的旧浏览器(或 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”标签？

Answer 1

优雅降级的一个重要部分是查询功能……深入了解 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 检查，但检查的是功能而不是浏览器签名。这是正确的做法 :-)

一旦您知道浏览器是否支持，您就可以显示您的视频标签或拉出灯箱或根据需要重定向。