17.8　使用多个来源的视频

一切看起来都很棒，不过你也应该注意到了，前面所有的例子都只用了一个视频文件（同时意味着只有一种格式）。

你已经知道了，要获得所有兼容HTML5的浏览器的支持，至少需要提供两种格式的视频：MP4和WebM。

如何做到呢？这时就要用到HTML5的source元素了。

通常，source元素用于定义一个以上的媒体元素（在这个例子中为video）的来源。

一个video元素中可以包含任意数量的source元素，因此为我们的视频定义两种不同的格式是相当容易的,如图17.8.1所示。

指定两种不同的视频来源

  • 获取视频资源（这次需要两个）。

  • 输入

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

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

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

  • 输入

    Sorry, your browser doesn't support the video element

    ，从而在浏览器不支持HTML5视频时显示这条消息。

  • 输入结束video元素。

  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.         <p>Sorry, your browser doesn't support the video element</p>
  6.      </video>
  7. </body>

图17.8.1　这里为视频定义了两个源：一个MP4文件和一个WebM文件。旧的浏览器则只会显示p元素中的消息