HTML5 Audio and Video 的新属性简介

前言： HTML5 中 Audio and Video的使用方法比较简单，但就是比较复杂，方法属性多。如果不常用的几乎难以记住，甚至有些人难以区分不同属性和方法的作用，更别说应用了。以下对Audio and Video的使用方法做了一个简单的总结，算是一个大致轮廓。至于具体的使用方法可以再网上查到，比较多就没总结。

HTML5 Audio and Video 的优势

1、作为原生的浏览器支持，无需安装任何第三方插件

2、HTML5 规范提供了一套完整的多媒体脚本化控制的API，开发人员可以轻易的使用脚本来控制播放的内容。

HTML5 Audio and Video 的缺陷

1、编解码器无法统一，必须对不同的浏览器进行分类处理，这是HTML多媒体规范中最大的缺陷

2、受到HTTP跨源资源共享的限制

3、全屏视频无法通过脚本进行控制，这主要从安全角度考虑，脚本元素控制全屏视频存在很大的漏洞。

4、对Audio和Video两个多媒体元素的访问尚未完全加入到规范中。

5、在播放复杂的视频流时资源消耗过大。

6、没有比特率切换标准，无法再普通、高清、全清视频之间进行切换。

7、暂不支持摄像头和麦克风。

8、在外网嵌入视频方面，远不如Flash方便。

当然这些都只是目前存在的典型缺陷，相信在不久的将来，HTML5将会进一步完善！

HTML5 Audio and Video的使用

一、浏览器支持情况

简介：检测用户的浏览器是否支持 HTML5 Audio and Video

            1
            function
             load(){

            2
            var video = document.createElement("video");
3if (typeof(video.canPlayType)) {
4         alert("支持！");
5     }else{
6         alert("不支持！");
7    }
8}
9 window.addEventListener("load",load,false);

二、元素标签及其简单属性

简介：简单列出多媒体元素标签Audio and Video的属性和简介，具体如下：

src:用来指定多媒体文件的来源地址

autoplay:

loop:

muted:

controls:

crossOrigi:

poster:

mediagroup:

preload:

width:

height:

videoWidth:

videoHeight:

三、source子标签及其使用

简介：source标签用来设置多个多媒体文件资源，浏览器会从多个多媒体文件资源中，依次选择其支持的多媒体文件进行播放，其用法和标签属性如下：

            <
            video 
            controls
            =“controls”
            >
            
    对不起，您的浏览器不支持HTML5 Audio and Video！
    
            <
            source 
            src 
            = "test_video.ogv"
            >
            <
            source 
            src 
            = "test_video.mp4"
            >
            </
            video
            >
        

source 子标签有三个属性：

src：必选，指定多媒体文件地址

media:可选，用来指定用户的浏览器对于特定的媒体资源是否有效。(media用来设置该多媒体在怎样的浏览器上才可以播放。)

            1    media的属性值                        //说 明
2handheld ：                            //表示该媒体文件只在手持设备上有效，默认是all
3all and (min-device-height:600px)：    //表示该媒体文件只在浏览器的最小高度达到600px时有效
4 all and (min-device-width:600px)：     //表示该媒体文件只在浏览器的最小宽度达到600px时有效

type:可选，用来指定引用多媒体资源的视频容器和编解码器。

            1
            type属性值                               说明

            2
            video/webm;codecs = "vp8,vorbis"               表示webm视频容器中的vp8视频编解码器和vorbis音频编解码器

            3
            video/ogg;codecs = "theora,vorbis"             表示ogg视频容器中的theora视频编解码器和vorbis音频编解码器

            4
            video/mp4;codecs = "avc1.42E01E,mp4a.40.2"     表示基本的MEPG-4视频容器中的H.264视频编解码器和ACC音频编解码器

            5 video/mp4;codecs = "avc1.64001E,mp4a.40.2"     表示高质量的MEPG-4视频容器中的H.264视频编解码器和ACC音频编解码器

四、多媒体元素的时间控制

简介：播放器在不同的时候会处于不同的状态，为了让开发人员方便的捕捉到这些状态，HTML5 Audio and Video 提供了一系列的事件属性，具体如下：

onloadstart:

onprogress:

onsuspend:

onabort:

onerror:

onemptied:

installed:

onloadedmetadata:

onloadeddata:

oncanplay:

oncanplaythrough:

onseeking:

onseeked:

onplaying:

onended:

onwaiting：

ondurationchange:

ontimeupdate:

onplay:

onpause:

onratechange:

onvolumechange:

五、多媒体元素的网络状态

简介：探讨HTMLMediaElement（包括Audio和Video）接口中与网络状态有关的常量、属性、和方法，具体如下：

NETWORK_EMPTY常量：

NETWORK_IDLE常量：

NETWORK_LOADING常量：

NETWORK_NO_SOURCE常量：

networkState:

src属性:

currentSrc属性:

crossOrigin属性:

preload属性:

load属性:

buffered属性:

canPlayType()方法：

六、多媒体元素的就绪状态

简介：探讨HTMLMediaElement（包括Audio和Video）接口中与就绪状态有关的常量、属性，具体如下：

HAVE_NOTHING常量：

HAVE_METADATA常量：

HAVE_CURRENT_DATA常量：

HAVE_FUTURE_DATA常量：

HAVE_ENOUGH_DATA常量：

readyState属性：

seeking属性：

七、多媒体元素的异常状态

简介：在HTMLMediaElement接口中，提供一个error属性用来表示浏览器在处理多媒体资源过程中发生的异常。事实上，这个error属性是一个MediaError接口。（目前支持情况还很不完善，仅IE9支持）。本节讨论MediaError对象中的常量和属性，具体如下：

MEDIA_ERR_ABORTED常量：

MEDIA_ERR_NETWORK常量：

MEDIA_ERR_DECODE常量：

MEDIA_ERR_SRC_NOT_SUPPORTED常量：

code属性：

八、多媒体元素的播放状态

简介：在HTMLMediaElement接口中，提供了一系列的属性和方法来获取播放器的播放状态信息，本节重点讨论这些属性和方法,具体如下：

currentTime:

duration:

paused:

defaultPlaybackRate:

playbackRate:

played:

seekable：

ended:

autoplay:

loop:

paly()方法:

pause()方法:

九、多媒体元素的控制按钮

简介：在HTMLMediaElement接口中，也提供了几个播放器控制按钮的属性，本节讨论与播放按钮有关的属性的具体使用，如下：

controls:

volume:

defaultMuted:

muted:

总结：记住对应的方法属性，学会应用和查找。

参考书籍：《HTML5 +CSS3技术应用》

未完待补充ing。。。。。。。。。。

原文：http://www.cnblogs.com/zxjwlh/p/4547662.html