html5新特性总结：媒体元素【video、audio】篇

媒体元素——video和audio

1.使用方法

audio使用方法：

<audio src=''  controls='controls'></audio>

video使用方法：

<video src=''  controls='controls' width=''  height=''></video>

或者：

<video>
<source src='video.mp4'  type ='video.mp4'/>
</video>

2.常见属性

1.src属性、controls 属性：controls='controls’进度条、width和height（video独有）

2.autoplay属性：autoplay= ‘autoplay’ 自动播放

3.preload属性：是否对数据进行预加载，默认是 auto ，

• 属性值：preload ='none' 表示不加载。
• preload = 'metadata' 表示只预加载媒体的元数据。
• preload = 'auto' 表示预加载全部的视频或音频。

4.poster属性（video独有）

当视频不可播放时，使用poster元素向用户展示一张图片代替视频

<video src = “videio.mp4” poster=“video.jpg”></video>

5.loop属性：是否循环播放 loop=“loop”

6.error属性：读取过程中一旦发生错误，返回一个MadiaError对象，这个对象的code返回对应的错误状态

• 1 = MEDIA_ERR_ABORTED 取回过程被用户终止
• 2= MEDIA_ERR_NETWORK当下载时发生错误
• 3 = MEDIA_ERR_decode 当解码时发生错误
• 4 = MEDIA_ERR_src_not_supported 媒体不可用或者不支持音频、视频

7.networkState属性：NetworkState属性返回视频当前的网络状态（activity）

4种错误状态：

• 0 = NETWORK_EMPTY 视频尚未初始化
• 1 = NETWORK_IDLE 视频是活动的且以选取资源，但并未使用网络
• 2 = NETWORK_loading 浏览器正在下载数据
• 3 = NETWORK_NO_SOURCE 未找到视频来源

3.video用法示例：

<video id="video" src="video.mp4""></video>

<script type="text/javascript">
	var video = document.getElementById('video')
	video.addEventListener("error",function(){
     
		var error = video.error;
		switch (error.code){
     
			case 1
			 	alert('取回过程被用户中止。')
			 	break;
			case 2
				alert('当下载时发生错误。')
				break;
			case 3:
				alert('当解码时发生错误。')
				break;
			case 4
				alert('媒体不可用或者不支持音频/视频。')
				break;
		}
	},false);
</script>