颠覆网络35天 ─ 使用标记来满足HTML5 video向前兼容

原文地址：html5 video fallbacks with markup
系列地址：颠覆网络35天

====================================

在前面一篇文章中，我们讨论过使用JavaScript根据浏览器支持来动态生成视频元素。

这里要做的例子可以在Safari 4、Firefox 3.5和使用Flash的IE上运行。如果你希望找到完整的例子可以支持video元素、quicktime、windows media、iPhone支持和Flash支持等，您可以查看“人人满意的Video元素”。他提供的方案已经被一大堆浏览器分别在不同的配置下测试过了。

您也可以查看Michael Verdi的使用向前兼容的video标签一文，文章中他使用了更简单也更容易理解的方法。

简单的例子

video 标签在网页中基本上是这个样子的：

<video src=“zombie.ogg” controls></video>

这段语句会在您的页面中插入一个视频元素。Firefox 3.5会开始读取视频，判断他的大小并按照实际大小来调整元素的大小。

Firefox 3.5支持Ogg Theora视频格式──免费并且开发标准的视频格式。Opera和Google的Chrome会在最近的版本中开始支持Theora。Safari 4需要使用Xiph Quicktime插件来支持。Apple把在Safari 4中使用mpeg4 格式申请了专利，并且设置为缺省支持的视频格式。

如果你希望这两种格式，那么需要提供多个格式的视频文件。同时需要改变标记语句来告诉浏览器支持的文件类型、他们希望被使用的优先级，然后让浏览器选择去显示哪个。在我们的例子中，代码可能是这样的：

<video controls>
<source src=“zombie.ogg” type=“video/ogg”/>
<source src=“zombie.mp4″ type=“video/mp4″/>
</video>

在这个例子中，浏览器会先检查看他是否支持video/ogg类型，如果支持的话，就直接使用第一个文件。如果不支持的话，会自动移动到下一条。

大多数现代浏览器对支持视频元素都有计划和方案，但是微软目前还没有很明显的表示出这样做的意思。所以为了支持IE用户，需要提供一些向前兼容的能力。例如在我们的例子中，使用Flash。

使用video元素很妙的一点就是他可以非常容易的兼容旧版本的浏览器。如果在上面例子中，您的浏览器不支持video标签并且不支持source标签，他会忽略这些标签回退到这些标签内部的元素上。下面来看看我们如何回退到发布在blip.tv上的视频：

<video controls>
<source src=“zombie.ogg” type=“video/ogg”/>
<source src=“zombie.mp4″ type=“video/mp4″/>
<embed src=“http://blip.tv/play/AYGLzBmU8hw”
  type=“application/x-shockwave-flash”
  width=“500″ height=“396″
  allowscriptaccess=“always”
  allowfullscreen=“true”/>
</video>

就是这样简单。这个例子支持所有浏览器，包括旧版本的，也包括现代浏览器。HTML5还没有完成，但是网页开发人员绝对可以开始从HTML5中利用这些更先进的特性了。

完整的例子在下面。

Post a comment | Trackback URI