HTML5—视频插入—video元素的属性、事件与方法

先来两个小问题：

1、目前浏览器是否都支持H5中的video元素？

答：否。IE8及其之前的版本均不支持video元素

2、video支持多少种视频格式？

答：三种。

MP4 - 目前比较主流的视频格式，所有浏览器均支持该格式

OGG - 之前手机端的一种视频格式

WEBM - 目前唯一一个支持超高清格式的视频格式。该方法是谷歌公司新推出

一、在<video>元素中同时引入三种视频格式?

在<video>元素中使用<source>元素，浏览器可以自动识别对应的视频格式，并加载。

<video>
<source src="DATA/oceans-clip.mp4"></source>
<source src="DATA/oceans-clip.ogv"></source>
<source src="DATA/oceans-clip.webm"></source>
</video>

二、<video>元素的属性

autoplay--自动播放

controls--显示操作面板，如播放/暂停按钮，进度条，音量等

loop--视频循环播放

poster--设置视频播放之前显示的图片，与src属性类似，值为路径

preload--设置视频的缓存情况。共有三个值：

auto：默认值，表示尽快缓存视频。

none：表示不缓存视频。

metadata：只缓存视频的基本信息，如高度，宽度等。

width--设置视频的宽度。

height--设置视频的高度。

另外，video标签之间的文本为浏览器不