Question

关于 IE

Internet Explorer 9 支持 HTML5 <video> 标签，Microsoft 官方提供 MP4 容器的 H.264 视频和 AAC 音频，就像 Safari 和 iPhone。

但是早期版本的 Internet Explorer 要如何处理呢？比如 IE9 之前的所有版本，包括 IE8？大多数 IE 用户都安装了 Adobe Flash 插件。现代版本的 Adobe Flash（9.0.60.184 以上版本）都支持 MP4 容器的 H.264 视频和 AAC 音频，正如 Safari 和 iPhone。如果你的视频提供 Safari 播放的编码格式，你就可以让使用不兼容 HTML5 的浏览器的用户使用基于 Flash 的播放器进行播放。

FlowPlayer 就是一个使用 GPL 协议开源的的基于 Flash 的视频播放器（也有商业协议）。FlowPlayer 并不关心 <video> 标签。它不会神奇地将 <video> 变成 Flash 对象。但是 HTML5 已经为此定义了很好的解决方案：你可以在 <video> 标签中嵌套 <object> 标签。不支持 HTML5 的浏览器会忽略 <video> 标签，并且渲染嵌套的 <object> 标签，而后者则启动 Flash 插件，通过 FlowPlayer 播放视频。支持 HTML5 的浏览器则会自动选择它们可以播放的视频进行播放，并且忽略掉嵌套的 <object> 。

最后一点需要注意的是：HTML5 要求所有 <video> 标签的子标签（除了 <source> ）都必须同时被忽略。这允许你在较新版本的浏览器中使用 HTML5 视频，而在较旧版本的浏览器中使用 Flash。这一方案不需要任何 JavaScript 的技巧。你可以阅读 这篇文章 了解更多信息。

iPhone 和 iPad 的注意事项

iOS 是 Apple 的 iPhone，iPod Touch 和 iPad 的操作系统。iOS 3.2 对 HTML5 的支持有很多问题。

• iOS 不能识别出添加了 poster 属性的 video。 <video> 标签的 poster 属性允许你在加载视频的过程中，或者用户点击了“播放”按钮之前，显示自定义图片。这个 bug 在 iOS 4.0 中已经被修复，但是在所有用户升级他们的系统之前，这仍将是一个问题。
• 如果你有多个 <source> 元素，iOS 只能识别第一个。既然 iOS 设备只支持 H.264+AAC+MP4，因此要解决这个问题，你必须使用将 MP4 放在第一位。这个 bug 在 iOS 4.0 也已经被修复。

Android 设备的注意事项

Android 是 Google 为智能手机和其他手持设备提供的操作系统。在 2.3 版本之前，Android 对 HTML5 的支持也有一堆问题。

• <source> 的 type 属性会让 Android 崩溃。让它识别出视频源的唯一方法是不写 type 属性，保证你的 H.264+AAC+MP4 视频文件后缀名是 .mp4。你也可以在其他视频格式的 source 里面包含 type 属性，因为 H.264 是 Android 2.2 唯一支持的格式（这个 bug 已经在 Android 2.3 修复。）
• 不支持 controls 属性。尽管加上这个属性不会有任何问题，但是 Android 不会显示任何视频控制组件。你仍然还提供自己的控制界面。至少，你应该提供一个用户点击视频之后能够开始播放的脚本。这个 bug 在 Android 2.3 已经被修复。

完整的示例

这里我们给出一个使用上面所说的技术的完整示例。我们扩展了 Video For Everybody 的代码，包含一个 WebM 视频，还有我们自己编码的同一视频的另外三种格式：

• Theora/Vorbis/Ogg
• H.264/AAC/MP4
• VP8/Vorbis/WebM

最后，我们使用 HTML5 的 <video> 标签，里面还要嵌套一个 <object> 元素，以便能够降级到 Flash，还有一小段专门针对 Android 设备的脚本：

<video id="movie" width="320" height="240" preload controls>
  <source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"' />
  <source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"' />
  <source src="pr6.mp4" />
  <object width="320" height="240" type="application/x-shockwave-flash"
    data="flowplayer-3.2.1.swf"> 
    <param name="movie" value="flowplayer-3.2.1.swf" /> 
    <param name="allowfullscreen" value="true" /> 
    <param name="flashvars" value='config={"clip": {"url": "http://wearehugh.com/dih5/pr6.mp4", "autoPlay":false, "autoBuffering":true}}' /> 
    <p>Download video as <a href="pr6.mp4">MP4</a>, <a href="pr6.webm">WebM</a>, or <a href="pr6.ogv">Ogg</a>.</p> 
  </object>
</video>
<script>
  var v = document.getElementById("movie");
  v.onclick = function() {
    if (v.paused) {
      v.play();
    } else {
      v.pause();
    }
  };
</script>

由于我们已经考虑到不支持 HTML5 浏览器的兼容问题，所以，这段代码应该能够适用于所有浏览器。