5

我一直在玩 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”标签？

4

3 回答 3

4

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

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

于 2009-12-15T00:00:09.933 回答
1

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

于 2011-03-27T21:19:18.897 回答
0

Video for Everyone的测试页面显示 Firefox 3.5 只能播放 OGG。如果您真的不想添加 OGG，您可能需要添加 Flash 版本。VfE 也不使用 JavaScript，因此可能值得研究。

于 2010-10-08T10:50:22.217 回答