12.2.2 在网页中添加单个视频

12.2.2 在网页中添加单个视频

在HTML5网页中添加视频需要使用video元素。

在网页中添加单个视频的步骤如下:

(1)获取视频资源。

(2)输入“<video src="视频地址"></video>”。

如下面代码所示:

controls是为了供添加播放、暂停和音量控件。也可以设定好元素的长、宽等属性。如下面代码所示:

上面的例子使用一个Ogg文件,适用于Firefox、Opera以及Chrome浏览器。要确保适用于Safari浏览器,视频文件必须是MPEG-4类型。

src属性直接指向媒体文件,而浏览器不支持相关容器或者编码器时就需要用到备用声明。备用声明中可以包含多种来源,浏览器可以从这么多的来源中进行选择。video元素允许多个source元素。source元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式。

source元素具有几个属性:src属性是指播放媒体的URL地址;type表示媒体类型,其属性值为播放文件的MIME类型,该属性中的codecs参数表示所使用媒体的编码格式。type属性是可选属性,但是如果明确知道浏览器支持某种类型最好不要省略,否则浏览器在处理的时候会在从上往下选择时无法判断自己能否播放而先行下载一小段视频数据,这样就有可能浪费带宽和时间。

因为各浏览器对各种媒体的类型及其编码格式的支持情况不同,所以使用source元素制定多种媒体类型是非常有必要的。

在下面的例子中,创建一个视频播放器,代码如下:

这段代码假定HTML文档(“例12-2-2.html”)和视频文件(“movie.ogg”)的位置在同一路径下。图12-1所示是在支持video元素的Firefox浏览器中的页面显示效果。从图中可以看到一个带有播放按钮的播放器控制条。单击播放按钮就可以播放视频文件。

图12-1 在网页中插入单个视频

代码中的controls属性告诉浏览器显示通用的用户控件,包括开始、停止、跳播以及音量控制。如果不指定controls属性,用户将无法播放页面中的视频。video元素之间的内容“您的浏览器不支持<video>标签。”是为不支持video元素的浏览器准备的替换内容,如果用户用的是老版本浏览器,页面上就会显示这些文本信息。替换内容并不局限于文本信息,还可以换成Flash播放器等视频播放插件,或者直接给出媒体文件的链接地址。

在上面的例子中,使用两个source元素替代了src属性,这样能让浏览器根据自身播放能力自动选择,挑选最佳的来源进行播放。对于来源,浏览器会根据声明顺序判断,如果浏览器支持不止一种来源,那么浏览器会选择它所支持的第一个来源。