作者在 本博客的上一篇文章 中，我们谈论了使用 JavaScript 动态创建视频元素。虽然这对 Mozilla 的支持网站来说是一个很好的用例，但在本文中，我们提供了另一套方法，这些方法可能会在网络上得到更广泛的应用。实际上，您可以在 Mozilla 的 Firefox 3.5 新功能 视频、本博客中看到它，并且我们正在看到整个网络上的应用越来越多。
这里的示例应该适用于 Safari 4、Firefox 3.5 和 IE，使用 Flash 回退。如果您正在寻找一个完整的示例，其中包括对视频元素、QuickTime、Windows Media、iPhone 支持和最终的 Flash 支持，您可以尝试查看 适合所有人的视频。它已经过测试，支持 大量不同配置的浏览器，如果您正在寻找对所有内容的支持，这是一个不错的起点。
您也可以查看 Michael Verdi 的 带有回退的视频标签 文章，他使用了一种更简单但更容易理解的方法。
一个简单的示例
在网页中，视频标签 看起来像这样
这将把一个视频元素插入您的页面。Firefox 3.5 将加载视频，确定其大小，并将元素大小调整为视频的自然大小。
Firefox 3.5 支持 Ogg Theora 视频格式，这是一种用于视频的免费开源标准。Opera 和 Google Chrome 也将在以后的版本中包含对 Theora 的支持。Safari 4 在使用 Xiph Quicktime 组件时也可以支持相同的格式，但不能保证存在。Apple 已经授权使用 mpeg4 格式 在 Safari 4 中，并且默认支持。
如果您希望支持这两种格式，则需要能够提供多种格式。您还需要更改标记，以告知浏览器文件类型、首选顺序，然后让浏览器选择使用哪一种来显示视频元素。对于我们的示例，代码如下所示
在这种情况下，浏览器首先会检查它是否支持 video/ogg 视频类型。如果支持，它将使用该类型并加载它。如果它不支持，它将继续到下一个条目，即 mp4 文件，如果支持该文件，它将使用该文件。
虽然大多数现代浏览器都有支持视频元素的具体计划，但微软尚未明确其意图。因此，为了在不久的将来支持 IE 用户，您应该提供回退，直到微软采用新的 HTML5 标准的这一部分。在我们的示例中，我们将使用一个简单的 Flash 回退。
视频元素的一个好处是它很容易降级到旧浏览器。如果在上面的示例中，您的浏览器不支持 video 标签，也不支持 source 标签，它将简单地回退到它们中包含的内容。这使得在非常简单的方式支持回退变得非常容易。下面是一个使用 blip.tv 的 Flash 回退示例。
就是这样。此示例支持所有浏览器，降级良好，有助于一举推动网络发展。HTML5 尚未完成，但 Web 开发人员今天就可以开始利用现代浏览器提供的功能。
完整示例嵌入在下面。
50 条评论