HTML5视频和退化？

Question

我一直在尝试使用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' 标签一样？

- ad rees

---

重申底部评论中所说的：只有在指定了一个正确的MIME类型的ogg源时，Firefox才会回退到Flash视频。 - BumbleB2na

Answer 1

优雅降级的重要部分是查询能力...《深入浅出HTML5》是一本很好的读物...具体而言，请查看视频部分。代码如下：

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检查，但是为了能力而不是浏览器签名。 这是正确的做法 :-)

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

- r00fus

---

这比仅仅检查浏览器标识更好，但它仍然比我期望的新标准多一些JavaScript... - ad rees

同意，这很不幸。由于HTML没有分支概念，我看不到避免使用javascript的方法。现有的非脚本方法依赖于连续兼容性层，但由于编解码器分裂，HTML5视频在这方面失败了，将其“烤入”语言中会很麻烦。 - r00fus

请注意，这对 Android 不起作用，因为它没有正确支持 canPlayType 方法。 - Matt Connolly

Answer 2

一个非常好的解决这个问题的方法是使用现代化的js库。它非常易于使用和快速。它可以检查用户浏览器中的HTML5功能。请访问此网站：http://www.modernizr.com/。

- Jaseem

---

那肯定是个好的解决方案，但我的问题实际上是关于在支持 HTML 5 的浏览器中使用标记语言。 - ad rees

Answer 3

适用于所有人的视频的测试页面显示Firefox 3.5只能播放OGG格式。如果您真的不想添加OGG，您可能需要添加Flash版本。VfE也不使用JavaScript，因此值得研究。

- Alan Pearce

---

VfE仍需要一个OGG版本，因为如果没有OGG，Firefox不会默认使用Flash版本或其他任何版本。 - ad rees