一、video元素与audio元素

1，audio

<audio controls="controls" src="MP3.mp3">不支持浏览器</audio>

2,video元素

<video controls="controls" width=”650” height=”280” src=”VIDEO.mp4” >不支持浏览器</video>

多浏览器支持

<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>

二、video元素与audio元素常用属性        

1，src属性：在这个属性里面指定媒体数据的URL地址

2，controls属性：指定是否为视频或者音频数据添加浏览器自带的播放控制条，控制条中有播放按钮、暂停按钮

3，width和height属性（video独有）：指定视频的宽度与高度

4，autoplay属性：这个属性指定是否当我们网页加载完成之后就开始自动播放

5，preload属性：这个属性指定是否对数据进行预加载，如果是的话，浏览器会将视频数据或者音频数据进行缓冲，这样做可以加快播放的速度。

Preload属性的三个值

（1）    none表示不进行预加载

（2）    metadata表示只预加载媒体的元数据

（3）    auto（默认值）表示预加载全部的视频或者音频

使用方法 preload=”auto”

6，poster属性（video独有）：当视频不可以播放的时候，使用poster元素想用户展示一张图片代替视频

使用方法poster=“video.jpg”

7,loop属性：指定是否循环播放视频或者音频数据

使用方法loop=“loop”

8，error属性

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

4错误状态，返回一个数字值，它表示音频/视频的错误状态：

（1）1=MEDIA_ERR_ABORTED – 取回过程被用户中止

（2）2= MEDIA_ERR_NETWORK – 当下载时发生错误

（3）3= MEDIA_ERR_DECODE – 当解码时发成错误

（4）4= MEDIA_ERR_SRC_NOT_SUPPORTED – 媒体不可用或者不支持音频/视频

使用方法

<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>

9，networkState属性：

NetworkState属性返回音频/视频的当前网络状态（activity）

4种错误状态，表示音频/视频元素的当前网络状态：

（1）0   = NETWORK_EMPTY – 音频/视频尚未初始化

（2）1  = NETWORK_IDLE – 音频/视频是活动的且已选取资源，但并未使用网络

（3）2  = NETWORK_LOADING – 浏览器正在下载数据

（4）3  = NETWORK_NO_SOURCE – 未找到音频/视频来源