17.11　添加具有备用Flash的视频

17.11　添加具有备用Flash的视频

除了可以提供下载链接作为后备方案，还可以（或许可以说应该）嵌入一个能播放MP4视频文件的Flash播放器。

是的，尽管HTML5和原生多媒体非常强大，但为了照顾那些无法处理这些技术的旧浏览器，恐怕还得求助于嵌入Flash内容的方法。也就是说，如果希望获得尽可能多的用户，至少还有一种选择！

过去，要在网页中嵌入备用Flash播放器和视频，既可以使用object元素，也可以使用embed元素，不过这两种方法都不是严格有效的HTML，因为它们都没有出现在规范中。

HTML5规范包含了embed和object元素，因此它们现在至少是有效的HTML。

我们将使用object元素，因为该元素提供的解决方案更完整——包含在object元素中的内容都会呈现出来，哪怕浏览器并不支持object元素指定的插件。这样就可以指定另外一个后备方案了（也应该这样做），即后备方案中的后备方案。

此外，我推荐下载并使用开源的Flash视频播放器（如JW Player、Flowplayer等），它们可以让上述嵌入视频的过程变得相当容易，如图17.11.1所示。如果播放器能播放MP4文件，就可以对现有的视频源文件进行复用，这是理想情况；如果不能播放MP4文件，则需要将视频转化为SWF或FLV文件。

<body>
     <video controls="controls">
        <source src="paddle-steamer.mp4" type="video/mp4">
        <source src="paddle-steamer.webm" type="video/webm">
        <object type="application/x-shockwave-flash" data="player.swf?videoUrl=paddle-steamer.mp4&controls=true">
            <param name="movie" value="player.swf?videoUrl=paddle-steamer.mp4&controls=true" />
        </object>
     </video>
</body>

图17.11.1　不支持HTML5的浏览器将转而使用备用Flash播放器，播放指定的MP4视频文件

备用Flash播放器

上面的代码片断中提到的备用Flash播放器（player.swf）包含在本章可供下载的代码中。这里用的播放器是相当出色的JW Player（由LongTail Video出品；www.longtailvideo.com/players/jw-flv-player）。

为视频添加备用Flash的步骤

获取视频资源。
输入
开始video元素（含默认控件集）。
输入，这里的myVideo.mp4是MP4视频源文件的名称。
输入，这里的myVideo.webm是WebM视频源文件的名称。
输入（这里的myVideo.mp4是视频源文件的名称）以指定这是一个备用Flash播放器，同时指定要使用的播放器和视频文件。注意这里指定的参数仅对本章所用的player.swf有效。
输入（这里的myVideo.mp4是视频源文件的名称），从而为不理解object元素开始标记中信息的浏览器指定要使用的播放器和视频文件。注意这里指定的参数仅对本章所用的player.swf有效。
输入结束object元素。
输入结束video元素。

<body>
     <video controls="controls">
        <source src="paddle-steamer.mp4" type="video/mp4">
        <source src="paddle-steamer.webm" type="video/webm">
        <object type="application/x-shockwave-flash" data="player.swf?videoUrl=paddle-steamer.mp4&controls=true">
        <param name="movie" value="player.swf?videoUrl=paddle-steamer.mp4&controls=true" />
        </object>
        <a href="paddle-steamer.mp4"> Download the video</a>
     </video>
</body>

图17.11.2　Internet Explorer 8中的备用Flash播放器

此外，还可以在Flash对象后面、video元素结束标记前面添加一个视频文件下载链接（如前面的示例那样）。这样就提供了进一步的后备方案，让用户可以下载视频文件，如图17.11.2和图17.11.3所示。不过，在不支持HTML5视频的浏览器中，备用Flash播放器会与下载链接一同显示出来。

17.11　添加具有备用Flash的视频 - 图1

图17.11.3　不支持HTML5视频的浏览器会转而使用备用Flash播放器，该播放器将播放指定的MP4视频文件。下载链接也会显示出来，没有安装Flash的浏览器会提供这种选择

为视频添加备用Flash和超链接

获取视频资源。
输入
开始video元素（含默认控件集）。
输入，这里的myVideo.mp4是MP4视频源文件的名称。
输入，这里的myVideo.webm是WebM视频源文件的名称。
输入（这里的myVideo.mp4是视频源文件的名称）以指定这是一个备用Flash播放器，同时指定要使用的播放器和视频文件。注意这里指定的参数仅对本章所用的player.swf有效。
输入（这里的myVideo.mp4是视频源文件的名称），从而为不理解object元素开始标记中信息的浏览器指定要使用的播放器和视频文件。
输入结束object元素。
输入Download the video（这里的myVideo.mp4是视频源文件的名称）以指定备用视频文件链接。
输入结束video元素。

提示　如果浏览器支持HTML5视频，但无法找到它能播放的文件，它将不会使用备用Flash播放器，如图17.11.4所示。

17.11　添加具有备用Flash的视频 - 图2

图17.11.4　Firefox在找不到可播放的视频文件时显示的样子（具有默认控件集）——它不会使用备用Flash播放器，也不会显示下载链接

提示　关于如何制作每个人都能访问的视频，Kroc Camen提供了一份很好的材料，名为“Video for Everybody”（http://camendesign.com/code/video_for_everybody）。此外，Jonathan Neal提供的Video for Everybody Generator也很值得下载（http://sandbox.thewikies.com/vfe-generator/）。

17.11 添加具有备用Flash的视频