12.2.7 多个媒体源
在上面的例子中只用了一个视频文件，同时只有一种格式。要获得所有兼容HTML5的浏览器的支持，至少需要提供两种格式的视频。这时就要用到HTML5的source元素。
source元素用来定义一个以上的媒体元素的来源，一个video元素中可以包含任意数量的source元素。
同时当浏览器不支持相关容器或者编/解码器时，就要用到备用声明。备用声明可以包含多种来源，浏览器可以从这么多的来源中进行选择。代码如下：
当浏览器发现video元素时，首先检查该元素是否定义src，如果没有，就会检查source元素。浏览器会逐个查看这些来源，直到找到它可以播放的一个来源，一旦找到，就会播放并且忽略其他的来源。
在下面的实例中，备用媒体源就是“water.webm”，“water.mp4”是首选媒体源，但是当首选媒体源不能使用时就会用到备用媒体源，旧的浏览器只会显示p元素中的消息。
并非所有的浏览器都能播放HTML5视频，对于这些浏览器，需要提供后备方案。
在下面的实例中，对不支持HTML5浏览器的用户显示一条文本信息，可以将这条信息替换成一个指向视频文件的超链接，从而让用户可以下载该文件并观看。代码如下：
在IE8浏览器中打开该文件时的效果如图12-4所示。
图12-4 添加备用超链接的视频
IE8浏览器会忽略video和source元素，仅显示下载链接。
除了添加备用链接以外，还可以嵌入一个能播放视频文件的Flash播放器。尽管HTML5和原生多媒体非常强大，但是为了照顾那些无法处理这些技术的旧浏览器，只有使用Flash的方法。
过去，在网页中嵌入备用Flash播放器和视频，既可以使用object元素，也可以使用embed元素。
可以使用object元素，是因为该元素提供的解决方案更完整——包含在object元素中的内容都会呈现出来，就算浏览器并不支持object元素指定的插件。这样就可以指定另外一个后备方案，即后备方案中的后备方案。此外，还可以试用开源的Flash视频播放器（如JW Player），它可以让嵌入视频的过程更容易。如果播放器能播放MP4文件，就可以对现有的视频源文件进行复用，如果不能播放MP4文件，则需要将视频转化为SWF或FLV文件。代码如下：
在上面的实例中，如果浏览器不支持video元素，就会启用备用Flash视频，该视频使用object元素插入备用视频，而播放该视频的播放器选择的是JW Player播放器。JW Player播放器可以在网站“http：//www.longtailvideo.com/”上下载，在本实例中该播放器被命名为“player.swf”，并且和实例中网页存储在同一文件夹下。其显示效果如图12-5所示。在object元素中除了定义数据类型和数据源地址以外，还定义了高度和宽度，如果使用默认值则有可能出现显示的误差。
图12-5 添加备用Flash的视频
除了单独使用备用Flash视频，还可以在Flash对象后面、video元素结束标签前面添加一个视频下载链接。这样就进一步提供了后备方案，让用户可以有多种选择，但是在不支持HTML5的浏览器中，备用Flash和超链接会同时显示。代码如下：
上面讲到的备用Flash视频和备用超链接都是在浏览器不支持HTML5视频的情况下使用的，但是如果浏览器支持HTML5视频，但是无法找到播放的文件时，它将不会使用备用的方案来处理。图12-6所示为使用Firefox浏览器，但是找不到可播放的视频文件时效果，这时不会使用备用Flash播放器，也不会显示下载链接。
图12-6 无法找到播放文件（Firefox浏览器显示效果）