video元素与audio元素

video元素与audio元素

audio标签是HTML5中添加音频的元素，它支持三种形式的音频：mp3,wav,ogg 。
src属性表示音频地址。
controls属性用来显示控制条。
使用方法：

<audio src="xxx.mp3" controls="controls">
您的浏览器不支持audio元素
</audio>

video标签是HTML5中添加视频的元素，它支持三种形式的视频：mp4,webm,ogg 。
使用方法：

<video width="750" height="400" src="xxx.mp4">
您的浏览器不支持video元素
</video>

1. autoplay属性:这个属性指定是否当网页加载完成后就开始自动播放。
2. preload属性:这个属性指定是否对数据进行预加载，若进行预加载，浏览器会将视频或音频数据进行缓冲。当它的值为none时表示不进行预加载；为metadata表示只预加载媒体的元数据；为auto（默认）时表示预加载全部的视频或音频。
3. poster（仅video）:当视频无法播放时，使用一张图片来代替视频。
   使用方法：

<video src="xxx.mp4" poster="xxx.jpg"></video>

4. loop属性：指定是否循环播放音频或视频。
   使用方法：

<video src="xxx.mp4" loop="loop"></video>

5. error属性：读取过程中一旦发生错误，返回一个Media Error对象，这个对象的code返回对应的错误状态，默认情况下video和audio的error属性值都是null。

<video id="video" src="1video.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>

6. networkState属性：表示音频/视频元素的当前网络状态：

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

source元素

source元素可以为同一个媒体数据指定多个播放格式与编码方式，以确保浏览器可以从中选择一种自己支持的播放器格式进行播放。选择顺序自上而下，直到选择到所支持的格式为止。
使用方法：

<video>
		<source src="xxx.m4v" type="video/mp4"/>
		<source src="xxx.webm" type="video/webm"/>
		<source src="xxx.ogv" type="video/ogg"/>
	</video>