6.2 <video>标记_HTML5+CSS3+jQuery Mobile+Bootstrap开发APP从入门到精通（视频教学版）-QQ阅读男生中文玄幻网

上QQ阅读APP看书，第一时间看更新

6.2 <video>标记

与音频文件播放方式一样，大多数视频文件在网页上也是通过插件来播放的，常见的播放插件Flash。由于不是所有的浏览器都拥有同样的插件，所以需要一种统一的包含视频的标准方法。与HTML4相比，HTML5新增了<video>标记。

video标记主要是定义播放视频文件或视频流的标准。支持3种视频格式，分别为Ogg、WebM和MPEG4。

如果需要在HTML5网页中播放视频，输入的基本格式如下：

<video src="123.mp4" controls="controls"></ video >

另外，在< video >与</ video >之间插入的内容是供不支持video元素的浏览器显示的。

【例6.2】（实例文件：ch06\6.2.html）

<!DOCTYPE html>
<html>
<head>
<title>video</title>
<head>
<body>
<video src="123.mp4" controls="controls">
您的浏览器不支持video标记！
</video>
</body>
</html>

如果用户的浏览器是IE 11.0之前的版本，则浏览效果如图6-3所示，可见IE 11.0之前的版本浏览器不支持<video>标记。

图6-3 不支持<video>标记的效果

在IE 11.0中浏览效果如图6-4所示，可以看到加载的视频控制条界面。单击【播放】按钮，即可查看视频的内容。

图6-4 支持<video>标记的效果

<video>标记的常见属性和含义如表6-3所示。

表6-3 <video>标记常见属性

由上表可知，用户可以自定义视频文件显示的大小。例如，如果想让视频以320×240像素大小显示，就可以加入width和height属性。具体格式如下：

<video width="320" height="240" controls src="123.mp4" ></video>

另外，<video>标记可以通过source属性添加多个视频文件，具体格式如下：

<video controls="controls">
<source src="123.ogg" type="video/ogg">
<source src="123.mp4" type="video/mp4">
</video>

视频解码器定义了视频数据流编码和解码的算法。其中，编码器主要是对数据流进行编码操作，用于存储和传输；解码器主要是先对视频文件进行解码，然后进行播放操作。

目前，在HTML5中，使用比较多的视频解码文件是Theora、H.264和VP8。

不同的浏览器对<video>标记支持也不同。表6-4列出了应用比较广泛的浏览器对<video>标记的支持情况。

表6-4 <video>标记的浏览器支持情况