作者：Mozilla 支持项目 (Mozilla Support Project) 和 support.mozilla.com（简称 SUMO）是一个开放的、由志愿者驱动的社区，每周帮助超过 300 万 Firefox 用户获得支持并解决他们最喜欢的浏览器的疑难问题。Firefox 支持社区维护着一个包含 30 多种语言文章的知识库，并通过我们的支持论坛或实时聊天服务直接与用户互动。他们整理了以下关于如何同时使用开放视频和基于 Flash 的视频，以便为用户提供嵌入式视频的演示，无论用户的浏览器是什么。本文由 Laura Thomson、Cheng Wang 和 Eric Cooper 撰写。
注意：本文展示了如何使用 JavaScript 将视频对象添加到页面。对于大多数页面，我们建议您阅读这篇文章，其中包含有关如何使用 video 标签提供简单的标记回退的信息。基于标记的回退比 JavaScript 解决方案更优雅，通常建议在 Web 上使用。
Web 上开放视频采用的一个挑战是确保在线视频在目前不支持开放视频的浏览器上也能表现良好。与其要求使用这些浏览器的用户下载视频文件并使用单独的播放器，新的 <video> 标签会优雅地降级，允许 Web 开发人员为每个人提供良好的体验。随着 Firefox 3.5 升级了 Web，在这个过渡时期，用户可以根据其浏览器支持的情况，无缝地显示开放视频或使用现有插件的视频。
在 SUMO 中，我们使用此系统提供解决问题步骤的屏幕截图，例如 关于如何将 Firefox 设置为默认浏览器的文章。
如果您使用 Firefox 3.5 或其他支持开放视频的浏览器访问该页面，并点击“观看这些说明的视频”链接，您将获得一个使用 Ogg 格式文件的屏幕截图。如果您使用不支持 <video> 的浏览器访问，则将获得使用开源 .flv 播放器和相同视频（以 .flv 格式编码，或在某些情况下使用 SWF Flash 格式）的完全相同的用户体验。这些替代观看方法使用几乎无处不在的 Adobe Flash 插件，这是在 Web 上显示视频最常见的方式之一。
代码的工作原理如下。
在包含屏幕截图的页面中，我们包含了一些 JavaScript 代码。以下是该代码的摘录，但您可以从 Mozilla SVN 查看或检出完整列表。
代码首先设置一个对象来表示播放器。
Screencasts.Player = {
width: 640,
height: 480,
thumbnails: [],
priority: { 'ogg': 1, 'swf': 2, 'flv': 3 },
handlers: { 'swf': 'Swf', 'flv': 'Flash', 'ogg': 'Ogg' },
properNouns: { 'swf': 'Flash', 'flv': 'Flash', 'ogg': 'Ogg Theora' },
canUseVideo: false,
isThumb: false,
thumbWidth: 160,
thumbHeight: 120
};
我们为每种可能的视频格式分配一个优先级。您会注意到我们还有 'canUseVideo' 属性，其默认值为 false。
稍后在代码中，我们测试用户的浏览器以查看它是否支持视频。
var detect = document.createElement('video');
if (typeof detect.canPlayType === 'function' &&
detect.canPlayType('video/ogg;codecs="theora,vorbis"') == 'probably' ) {
Screencasts.Player.canUseVideo = true;
Screencasts.Player.priority.ogg =
Screencasts.Player.priority.flv + 2
}
如果我们可以创建一个 video 元素并且它指示它可以播放 Ogg Theora 格式，我们将 canUseVideo 设置为 true 并将 Ogg 文件的优先级提高到高于 .flv 文件的优先级。（请注意，您还可以检测浏览器是否可以播放 .mp4 文件以开箱即用地支持 Safari。）
最后，我们使用优先级来选择实际播放的文件，方法是遍历文件列表以找到优先级最高的那个文件。
for (var x=0; x < file.length; x++) {
if (!best ) {
best = file[x];
} else {
if (this.priority[best] < this.priority[file[x]])
best = file[x];
}
}
有了这些部分，浏览器只会显示最高优先级的视频，并且以其可以处理的格式显示。
如果您想了解更多关于 Mozilla 支持项目的信息或参与帮助 Firefox 用户，请查看他们的 入门指南。
资源
* 注意：要在 Mac OSX 上使用 Safari 4 查看此演示，您需要使用 Xiph Quicktime 插件（可从 http://www.xiph.org/quicktime/download.html 获取）为 Quicktime 添加 Ogg 支持。
37 条评论