video元素与audio元素
1、video元素与audio元素的基础知识
video元素
--在HTML5中专门用来播放网络上的视频或者电影。
audio元素
--在HTML5中专门用来播放网络上的音频。
使用video和audio元素进行播放时就不在需要使用其他的插件了，只要我们的浏览器支持HTML5就可以了！
浏览器的支持：
Safari3以上、Firefox4以上、0pera10以上、chrome3.0以上版本都对audio元素和video元素支持！
使用方法
audio元素只需要给他指定一个src属性：
<audio src="MP3.mp3" controls="controls"></audio>
对于不支持的浏览器我们可以在这对元素之间加入提示语句来代替
<audio src="MP3.mp3" controls="controls">您的浏览器不支持Audio元素</audio>
video元素要设定好长宽和src属性就可以了：
<video width="750" height="400" src="time.mp4"></video>
同样对于不支持video的浏览器可以在中间加入替换文字：
<video width="750" height="400" src="time.mp4">您的浏览器不支持video元素</video>
source元素指定多个播放格式与编码：
source元素可以为同一个媒体数据指定多个播放格式与编码方式，以确保浏览器可以从中选择一种自己支持的播放格式进行播放。选择顺序自上而下，直到选择到所支持的格式为止。
使用方法：
<video>
<source src="video.m4v" type="video/mp4" />
<source src="video.webm" type="video/webm" />
<source src="video.ogv" type="video/ogg" />
<source src="video.mp4" />
</video>
各种设备对编码格式的支持情况：
webm(.webm)格式的视频 火狐4.0+、chrome6.0+、opera10.6+
mp4(.m4v)格式的视频 IE9.0+ 、Safari3.1+ 、iso5.0 、Android4.0+
ogg(.ogv)格式的视频 火狐3.5+、chrome3.0+、opera10.5+
mp4(.mp4)格式的视频 IE9.0+ 、Safari3.1+ 、iso3.0 、Android2.3+
2、viedo与audio的常用属性
audio元素和video元素的常用属性
src属性：
在这个属性里面指定媒体数据的URL地址。
controls属性：
指定是否为视频或者音频数据添加浏览器自带的播放控制条，控制条中有播放按钮、暂停等按钮。
使用方法：
<video src="video.mp4" controls="controls"></video>
width和height属性（video独有）：
指定视频的宽度与高度。
使用方法：
<video src="video.mp4" width="650" height="450"></video>
autoplay属性：
这个属性指定是否当我们网页加载完成之后就开始自动播放。
preload属性：
这个属性指定是否对数据进行预加载，如果是的话，浏览器会将视频数据或者音频数据进行缓冲，这样做可以加快播放的速度。
preload属性的三个值：
none 表示不进行预加载。
metadata 表示只预加载媒体的元数据。
auto(默认值) 表示预加载全部的视频或者音频。
使用方法：
<video src="video.mp4" preload="auto" ></video>
poster属性（video独有）：
当视频不可以播放的时候，使用poster元素向用户展示一张图片代替视频。
使用方法：
<video src="video.mp4" poster="video.jpg"></video>
loop属性：
指定是否循环播放视频或者音频数据。
使用方法：
<video src="video.mp4" autoplay="auto" loop="loop"></video>
error属性：
读取过程中一旦发生错误，返回一个Media Error对象，这个对象的code返回对应的错误状态，默认情况下video和audio的error属性都是null。
4种错误状态，返回一个数字值，它表示音频/视频的错误状态：
1 = MEDIA_ERR_ABORTED - 取回过程被用户中止
2 = MEDIA_ERR_NETWORK - 当下载时发生错误
3 = MEDIA_ERR_DECODE - 当解码时发生错误
4 = MEDIA_ERR_SRC_NOT_SUPPORTED - 媒体不可用或者不支持音频/视频
读取错误状态示例
<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>
networkState属性：
networkState 属性返回音频/视频的当前网络状态（activity）
4种错误状态，表示音频/视频元素的当前网络状态：
0 = NETWORK_EMPTY - 音频/视频尚未初始化
1 = NETWORK_IDLE - 音频/视频是活动的且已选取资源，但并未使用网络
2 = NETWORK_LOADING - 浏览器正在下载数据
3 = NETWORK_NO_SOURCE - 未找到音频/视频来源
networkState属性：
networkState 属性返回音频/视频的当前网络状态（activity）
3、video与audio的4种方法
video元素和audio元素的4种方法
play方法：
使用play方法来播放媒体，自动将元素的paused属性的值变成false。
pause方法：
使用pause方法来暂停播放，自动将元素的paused属性的值变成true。
load方法：
使用load方法来重新载入媒体进行播放，自动将元素的playbackRate属性的值变成defaultPlaybackRate属性的值，自动把error的值变成null。
canPlayType方法：
使用canPlayType方法来测试浏览器是否支持指定的媒体类型。
使用方法如下：
var support = videoElment.canPlayType(type);
canPlayType() 方法可返回下列值之一：
"probably" - 浏览器最可能支持该音频/视频类型
"maybe" - 浏览器也许支持该音频/视频类型
"" - （空字符串）浏览器不支持该音频/视频类型
网友评论