17.10　添加具有备用超链接的视频

并非所有的浏览器都能播放HTML5视频（如Internet Explorer 8及以下的版本）。对于这些浏览器，需要提供后备方案。

或许对你来说，前一节介绍的示例中同时使用video和source元素的方式已经非常理想了。

你是对的。

无法理解video和source元素的浏览器会直接忽略它们，可以利用这一点实现后备方案。

在那个示例中，对于使用不支持HTML5的浏览器的用户，会显示一条文本消息。可以将这条消息替换为一个指向视频文件的超链接，从而让用户可以下载该文件并在闲暇时观看该视频。

在这个例子中（如图17.10.1和图17.10.2所示），我选择包含一个指向MP4版本视频的下载链接，不过提供指向WebM文件的链接或提供指向这两种格式文件的链接同样也很容易。

  1. <body>
  2.      <video controls="controls">
  3.         <source src="paddle-steamer.mp4" type="video/mp4">
  4.         <source src="paddle-steamer.webm" type="video/webm">
  5.         <a href="paddle-steamer.mp4"> Download the video</a>
  6.      </video>
  7. </body>

图17.10.1　为视频指定了MP4和WebM两种来源，同时，在旧的浏览器中将显示下载该MP4文件的链接。

17.10　添加具有备用超链接的视频 - 图1

图17.10.2　Internet Explorer 8会忽略video和source元素，仅显示下载链接

为视频添加备用超链接的步骤

  • 获取视频资源。

  • 输入

    开始video元素（含默认控件集）。

  • 输入，这里的myVideo.mp4是MP4视频源文件的名称。

  • 输入，这里的myVideo.webm是WebM视频源文件的名称。

  • 输入Download the video（这里的myVideo.mp4是视频源文件的名称）以指定备用视频文件超链接，用户可以通过这个超链接下载视频。

  • 输入结束video元素。