HTML5的Video标签的属性,方法和事件汇总

【video嵌入的方式】

目前，<video> 元素支持三种视频格式：MP4、WebM、Ogg。

//单种格式
<video id="media" src="movie.mp4" preload="auto"></video>
//多种格式的兼容
<video id="media" preload="auto">
	<source src="movie.mp4" type="video/mp4" />
	<source src="movie.ogg" type="video/ogg" />
	Your browser does not support the video tag.
</video> 

浏览器	MP4	WebM	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES 从 Firefox 21 版本开始 Linux 系统从 Firefox 30 开始	YES	YES
Safari	YES	NO	NO
Opera	YES 从 Opera 25 版本开始	YES	YES

• MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器
• WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器
• Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器

【video标签属性】

属性	值	描述
src	URL	要播放的视频的 URL。
poster	URL	规定视频正在下载时显示的图像，直到用户点击播放按钮。
preload	auto metadata none	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
muted	muted	如果出现该属性，视频的音频输出为静音。
width	pixels	设置视频播放器的宽度。
height	pixels	设置视频播放器的高度。

【video属性和方法】

获取video对象

** HTMLVideoElement和HTMLAudioElement 均继承自HTMLMediaElement **

Media = document.getElementById("media"); 

• Media.error; //null:正常
• Media.error.code; //1.用户终止 2.网络错误 3.解码错误 4.URL无效

** 网络状态 **

• Media.currentSrc; //返回当前资源的URL
• Media.src = value; //返回或设置当前资源的URL
• Media.canPlayType(type); //是否能播放某种格式的资源
• Media.networkState; //0.此元素未初始化 1.正常但没有使用网络 2.正在下载数据 3.没有找到资源
• Media.load(); //重新加载src指定的资源
• Media.buffered; //返回已缓冲区域，TimeRanges
• Media.preload; //none:不预载 metadata:预载资源信息 auto:

** 准备状态 **

• Media.readyState;//1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA
• Media.seeking; //是否正在seeking

** 回放状态 **

• Media.currentTime = value; //当前播放的位置，赋值可改变位置
• Media.startTime; //一般为0，如果为流媒体或者不从0开始的资源，则不为0
• Media.duration; //当前资源长度 流返回无限
• Media.paused; //是否暂停
• Media.defaultPlaybackRate = value;//默认的回放速度，可以设置
• Media.playbackRate = value;//当前播放速度，设置后马上改变
• Media.played; //返回已经播放的区域，TimeRanges，关于此对象见下文
• Media.seekable; //返回可以seek的区域 TimeRanges
• Media.ended; //是否结束
• Media.autoPlay; //是否自动播放
• Media.loop; //是否循环播放
• Media.play(); //播放
• Media.pause(); //暂停

** 视频控制 **

• Media.controls;//是否有默认控制条
• Media.volume = value; //音量
• Media.muted = value; //静音

** TimeRanges(区域)对象 **

• TimeRanges.length; //区域段数
• TimeRanges.start(index) //第index段区域的开始位置
• TimeRanges.end(index) //第index段区域的结束位置

【video事件】

 Media.addEventListener(evt, function(){
	 console.log(evt.type);
},false);

属性	描述
loadstart	浏览器开始在网上寻找媒体数据
progress	浏览器正在获取媒体数据
suspend	浏览器暂停获取媒体数据，但是下载过程并滑正常结束
abort	浏览器在下载完全部媒体数据之前中止获取媒体数据，但是并不是由错误引起的
error	获取媒体数据过程中出错
emptied	video元素或audio元素所在网络突然变为未初始化状态可能原因有两个: 1.载入媒体过程中突然发生一个致命错误 2.在浏览器正在选择支持的播放格式时，又调用 了load方法重新载入媒体
stalled	浏览器尝试获取媒体数据失败
play	即将开始播放，当执行了play方法时触发，或数据下载后元素被设为autoplay属性
pause	播放暂停，当执行了pause方式时触发
loadedmetadata	浏览器获取完毕媒体的时间长和字节数
waiting	播放过程由于得不到下一帧而暂停播放（例如下一帧尚未加载完毕），但很快就能够得到下一帧
canplay	浏览器能够播放媒体，但估计以当前的播放速率不能直接播放完毕，播放期间需要缓冲
canplaythrough	浏览器能够播放媒体，而且以当前播放速率能够将媒体播放完毕，不再需要进行缓冲
seeking	seeking属性变为true，浏览器正在请求数据
seeked	seeking属性变为false，浏览器停止请求数据
timeupdate	由于播放位置被改变，可能是播放过程中的自然改变，也可能是被人为的改变，或由于播放不能连续而发生的跳变
ended	播放结束后停止播放
ratechange	defaultplaybackRate属性（默认播放速率）或playbackRate属性（当前播放速率）被改变
druationchange	播放时长被改变
volumechange	volume属性（音量）被改变或muted属性（静音状态）被改变

【相关资料及转载】

HTML <video> 标签 | 菜鸟教程

HTML5的Video标签的属性,方法和事件汇总