17.5　为视频添加控件和自动播放

目前仅向你展示了在网页中添加视频的最简单的方法，而示例中的视频甚至不会自动开始播放，因为我们没有让它这样做。此外，如果查看这段示例代码的浏览器不支持所使用的视频文件格式，浏览器就会显示一个空的矩形（如果没有指定尺寸，则为300像素×150像素）或海报图像（如果有的话；通过poster属性指定）。

17.3节中的代码示例并未给视频添加任何控件，不过要添加控件也是相当容易的，如图17.5.1所示。

  1. <body>
  2.      <video src="paddle-steamer.webm" controls="controls"></video>
  3. </body>

图17.5.1　添加单个WebM视频（这次是包含控件的）

controls属性告诉浏览器为视频添加一套默认的控件。

布尔类型的属性

布尔类型的属性（如controls）不需要指定值，因为它们出现在媒体元素中就足够了。

本书的示例均为这些布尔类型的属性指定了值，不过，图17.5.1中的controls也可以写做

  1. <video src="paddle-steamer.webm" controls></video>.

每个浏览器都有自己的一套默认控件，它们之间看起来差异很大，如图17.5.2~图17.5.6所示。

17.5　为视频添加控件和自动播放 - 图1

图17.5.2　Firefox中的视频控件

17.5　为视频添加控件和自动播放 - 图2

图17.5.3　Safari中的视频控件

17.5　为视频添加控件和自动播放 - 图3

图17.5.4　Chrome中的视频控件

17.5　为视频添加控件和自动播放 - 图4

图17.5.5　Opera中的视频控件

17.5　为视频添加控件和自动播放 - 图5

图17.5.6　Internet Explorer 9中的视频控件

下面的例子演示了如何使用表17.1中的一些视频属性，如图17.5.7所示。

  1. 为视频添加控件的方法

输入

。

  1. 为视频添加自动播放

  • 获取视频资源。

  • 输入

    ，这里的myVideo.ext是视频文件的位置、名称和扩展名。

  1. <body>
  2.      <video src="paddle-steamer.webm" autoplay="autoplay" controls="controls"></video>
  3. </body>

图17.5.7　设置了加载时自动播放的单个WebM视频