媒体元素——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>