internet-explorer-8 - 如何为 IE 8 制作带有无 Flash 后备的 HTML 5 视频

Question

我需要一个简单、干净、无 Flash、跨浏览器的解决方案，用于在网页中嵌入视频。我想出了下面的解决方案，并希望听到是否有人可以进一步改进它，包括:

可以<object>方法在缓冲视频时显示静止图像？

有人可以验证那些有条件的评论吗？ downlevel-hidden和 downlevel-revealed让我有点困惑:)

视频转换如下(IE 8 使用 WMV，Firefox 使用 WEBM，其余使用 H264):

ffmpeg -i video.mov -b 3000k -vcodec wmv2   -acodec wmav2     -ab 320k -g 30 out.wmv
ffmpeg -i video.mov -b 3000k -vcodec libvpx -acodec libvorbis -ab 320k -g 30 out.webm

标记(使用条件注释创建对 IE 8 用户的回退):

<![if (!IE) | (gte IE 9)]>
<video controls="true" autoplay="true" poster="video.jpg">
  <source src="video.mov" type="video/quicktime"/>
  <source src="video.webm" type="video/webm"/>
</video>
<![endif]>

<!--[if (IE) & (lt IE 9)]>
<object classid="clsid:22d6f312-b0f6-11d0-94ab-0080c74c7e95" width="1280" height="720">
  <param name="filename" value="video.wmv"/>
  <param name="autostart" value="autostart"/>
  <param name="showcontrols" value="true"/>
  <param name="showstatusbar" value="true"/>
</object>
<![endif]-->

Answer 1

我建议把 <object> <video> 内的标签标记，在来源之后。不支持 video 标签的旧浏览器(例如 IE < 9、Firefox < 3.6)将忽略它并显示其中的内容，而支持视频的新浏览器将忽略任何内部内容(当然，源除外)。

您还可以通过将后备内容放在 <object> 中来做得更好。未安装 Quicktime 的系统上的旧浏览器的标记。通常，这将是海报图像和升级浏览器的建议或下载视频文件的链接。

看看Video for Everybody有关其工作原理和示例的更完整描述。只需将 Flash 对象替换为您的 Quicktime 对象即可。 (我想，如果你想真正彻底，你可以在 Quicktime 对象中放置一个 Flash 对象，这样在没有安装 Quicktime 的机器上的旧浏览器可能会退回到 Flash，如果他们有它。但这可能是一个非常小的人数，可能是矫枉过正。)