video元素与audio元素

video元素与audio元素

一、video元素与audio元素

1audio

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

image002.jpg

2,video元素

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

image004.jpg

多浏览器支持

<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元素常用属性        

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

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

3widthheight属性(video独有):指定视频的宽度与高度

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

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

Preload属性的三个值

(1)    none表示不进行预加载

(2)    metadata表示只预加载媒体的元数据

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

使用方法 preload=”auto”

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

使用方法poster=video.jpg

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

使用方法loop=loop

8error属性

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

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

11=MEDIA_ERR_ABORTED – 取回过程被用户中止

22= MEDIA_ERR_NETWORK – 当下载时发生错误

33= MEDIA_ERR_DECODE – 当解码时发成错误

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

9networkState属性:

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

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

(1)0   = NETWORK_EMPTY – 音频/视频尚未初始化

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

(3)2  = NETWORK_LOADING – 浏览器正在下载数据

(4)3  = NETWORK_NO_SOURCE – 未找到音频/视频来源



回复列表



回复操作

正在加载验证码......

请先拖动验证码到相应位置