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'标签一样？

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

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