MJiA

原文地址：using HTML5 video with fallbacks to other formats
系列地址：颠覆网络35天

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

Mozilla支持计划和support.mozilla.com（简称SUMO）是一个开放的志愿社区，希望每周为超过300万用户提供支持和帮助。Firefox支持社区维护一个拥有超过30种语言的大量文章的知识库，并提供在线客服服务。他们制作了下面的演示，让大家知道如何同时使用开放视频和基于Flash的视频，从而不用担心用户使用的浏览器。这个演示文章作者为Laura Thomson、Cheng Wang 和 Eric Cooper。

要想互联网大量支持开放视频很大一个挑战在于，用户如果还使用未支持开放视频浏览器的话，在线视频服务也能提供相同的功能。与其要求用户去下载这些支持的浏览器或者采用不同的播放器，全新的<video>标签直接支持元素降级，从而允许互联网开发人员提供更好的体验。

在SUMO项目中，我们使用系统提供解决问题的截屏视频，例如这篇文章展示如何把Firefox设定为缺省浏览器。

如果你使用Firefox 3.5访问该页面，或者其他支持开放视频的浏览器，点击“查看操作视频”链接，你会获得一份Ogg格式的截屏视频。如果使用不支持开放视频的浏览器访问，你会跟以往一样得到一个开源.flv播放器和该视频的.flv格式文件。后者是目前互联网中最流行的视频播放方式。

代码如下。

在包含截屏视频的页面中，我们包括一些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格式。

最后，我们使用优先级来选择播放哪个文件：

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];
  }
}

使用这些代码，就可以根据浏览器器来选择播放什么格式的视频。

资源

• MDC上关于在audio和video元素中使用向前兼容选项的文章
• Using the video tag with fallbacks without using JavaScript