初学HTML5——视频

<video>标签

1.具体语法格式:

<video src="视频文件路径" controls="controls"> 
	你的浏览器不支持video标签/*当浏览器不支持时显示*/
</video>

2.用于控制视频播放的属性

属性	允许取值	取值说明
autopaly	autoplay	如果出现该属性，则视频在就绪后马上播放
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮
height	pixels	设置视频播放器的高度
loop	loop	如果出现该属性，则当媒体文件播放完再次开始播放
preload	preload	如果出现该属性，则视频在页面加载是进行加载，并预备播放，如果出现“autoplay”,则忽视该属性
src	url	要播放的视频的url
width	pixels	设置视频播放器的宽度

3.<video>支持的三种视频格式

• Ogg：带有Theora视频编码和Vorbis音频编码的Ogg文件
• MPEG 4：带有H.264视频编码和ACC音频编码的MPEG 4文件
• WebM：带有VP8视频编码和Vorbis音频编码的WebM文件

浏览器的支持情况

视频格式	IE 9	Firefox 4.0	Opera 10.6	Chrome 6.0	Safari 3.0
Ogg		支持	支持	支持
MPEG 4	支持			支持	支持
WebM		支持	支持	支持

4.<video>标签的使用

目前为止，没有一种视频格式让所有浏览器都支持，为此，HTML5中提供了<source>标签，用于指定多个备用的不同格式的文件的路径，语法如下所示：

<video controls>
	<source src="视频文件地址" type="媒体文件类型/格式">
	<source src="视频文件地址" type="媒体文件类型/格式">
	......
</video>

5.Video对象的常用方法

方法	描述
load()	加载媒体文件，为播放做准备，通常用于播放前的预加载，也会用于重新加载媒体文件
play()	播放媒体文件，如果视频没有加载则加载并播放；如果视频是暂停的，则变为播放
pause()	暂停播放媒体文件
canPlayType()	测试浏览器是否支持指定的媒体类型

6.Video对象的常用属性

属性	描述
currentSrc	返回当前视频的url
currentTime()	设置或返回视频中的当前播放位置（秒）
duration	返回视频的长度（秒）
ended	返回视频的播放是否结束
error	返回表示视频错误状态的MediaError对象
paused	设置或返回视频是否暂停
muted	设置或返回是否关闭声音
volume	设置或返回视频的音量
height	设置或返回视频的高度值
weight	设置或返回视频的宽度值

7.Video对象的常用事件

事件	描述
play	当执行方法play()时触发
playing	正在播放时触发
pause	当执行了方法pause()时触发
timeupdata	当播放位置被改变时触发
ended	当播放结束后停止播放时触发
waiting	在等待加载下一帧是触发