代码之家 › 专栏 › 技术社区 › ad rees

HTML5视频和降级?

firefox3.5 accessibility html5 video firefox

5

ad rees · 技术社区 · 16 年前

我一直在玩HTML5视频标签,我很困惑,当你不能支持编解码器时,如何最好地降级?

<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>

3 回复 | 直到 16 年前

1

4

µBio 15 年前

优雅降级的一个重要部分是查询功能。。。潜入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检查,但需要功能检查,而不是浏览器签名检查。这是最重要的 :-)

一旦你知道浏览器是否支持,你就可以显示你的视频标签,或者打开一个灯箱,或者根据你的需要重定向。

2

1

Jaseem 15 年前

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

3

0

Alan Pearce 16 年前

Video for Everybody 的 test page 表示Firefox 3.5只能播放OGG。如果你真的不想添加OGG,你可能想添加一个flash版本。VfE也不使用JavaScript,因此可能值得研究。