html5多媒体组件API

HTML5多媒体组件指的是video(视频)组件和audio(音频)组件。Html5多媒体组件可以在不借助诸如Flash
Player等第三方插件的情况下，直接在你的网页上嵌入多媒体组件。浏览器提供原生支持视频的新能力使得网页开发人员更易于在不依赖于外置插件有效性的情况下，在他们的网站上添加视频组件。由于苹果公司现阶段在iPhone和iPad上使用的Flash技术的局限性，HTML5多媒体组件的能力就显得尤为重要了。

视频编码和解码

视频编码

所谓视频编码方式就是指通过特定的压缩技术，将某个视频格式的文件转换成另一种视频格式文件的方式。

用特定方法把已经编码的视频还原成它原有的格式，进行播放

编码说明

Theora 视频编码，Theora是开放而且免费的视频压缩编码技术，由Xiph基金会发布。做为该基金会Ogg项目的一部分，从VP3 HD高清到MPEG-4/DiVX格式都能够被Theora很好的支持。 使用Theora无需任何专利许可费。Firefox和Opera将通过新的HTML5元素提供了对Ogg/Theora视频的原生支持。

 H.264 视频编码，H.264是在MPEG-4技术的基础之上建立起来的，H.264与以前的国际标准如H.263和MPEG-4相比，为达到高效的压缩，充分利用了各种冗余，统计冗余和视觉生理冗余。蓝光技术（Blu-ray）就采用这种格式

 VP8 视频编码，视频压缩解决方案厂商On2 Technologies公司现已推出最新的视频压缩格式On2 VP8。On2 VP8是第八代的On2视频，能以更少的数据提供更高质量的视频，而且只需较小的处理能力即可播放视频










source标签属性

音频文件提供至少两种不同的解码器才能覆盖所有支持HTML5的浏览器。

如同对视频元素的处理一样，你需要使用source元素来实现该功能。

一个audio元素能包含多种source元素，因此你能为你的音频提供多种格式支持



videoAPI方法



videoAPI事件


videoAPI属性

<audio> 标签属性：

src：音乐的URL
preload：预加载
autoplay：自动播放
loop：循环播放
controls：浏览器自带的控制条

Html代码  


<audio id="media" src="http://www.abc.com/test.mp3" controls></audio>  

 

<video> 标签属性：

src：视频的URL
poster：视频封面，没有播放时显示的图片
preload：预加载
autoplay：自动播放
loop：循环播放
controls：浏览器自带的控制条
width：视频宽度
height：视频高度

Html代码  


<video id="media" src="http://www.abc.com/test.mp4" controls width="400px" heigt="400px"></video>  

 

获取HTMLVideoElement和HTMLAudioElement对象

 

Js代码  


//audio可以直接通过new创建对象  

Media = new Audio("http://www.abc.com/test.mp3");  

//audio和video都可以通过标签获取对象  

Media = document.getElementById("media");  

 

 

Media方法和属性：

HTMLVideoElement 和 HTMLAudioElement 均继承自 HTMLMediaElement

 

Js代码  


//错误状态  

   Media.error; //null:正常  

   Media.error.code; //1.用户终止 2.网络错误 3.解码错误 4.URL无效  

  

//网络状态  

   Media.currentSrc; //返回当前资源的URL  

   Media.src = value; //返回或设置当前资源的URL  

   Media.canPlayType(type); //是否能播放某种格式的资源  

   Media.networkState; //0.此元素未初始化  1.正常但没有使用网络  2.正在下载数据  3.没有找到资源  

   Media.load(); //重新加载src指定的资源  

   Media.buffered; //返回已缓冲区域，TimeRanges  

   Media.preload; //none:不预载 metadata:预载资源信息 auto:  

  

//准备状态  

   Media.readyState;    //1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA  

   Media.seeking; //是否正在seeking  

  

//回放状态  

   Media.currentTime = value; //当前播放的位置，赋值可改变位置  

   Media.startTime; //一般为0，如果为流媒体或者不从0开始的资源，则不为0  

   Media.duration; //当前资源长度 流返回无限  

   Media.paused; //是否暂停  

   Media.defaultPlaybackRate = value;//默认的回放速度，可以设置  

   Media.playbackRate = value;//当前播放速度，设置后马上改变  

   Media.played; //返回已经播放的区域，TimeRanges，关于此对象见下文  

   Media.seekable; //返回可以seek的区域 TimeRanges  

   Media.ended; //是否结束  

   Media.autoPlay;  //是否自动播放  

   Media.loop;  //是否循环播放  

   Media.play();    //播放  

   Media.pause();   //暂停  

  

//控制  

   Media.controls;//是否有默认控制条  

   Media.volume = value; //音量  

   Media.muted = value; //静音  

  

   //TimeRanges(区域)对象  

   TimeRanges.length; //区域段数  

   TimeRanges.start(index) //第index段区域的开始位置  

   TimeRanges.end(index) //第index段区域的结束位置  

 

事件：

Js代码  


       eventTester = function(e){  

    Media.addEventListener(e,function(){  

        console.log((new Date()).getTime(),e);  

    });  

}  

  

eventTester("loadstart");   //客户端开始请求数据  

eventTester("progress");    //客户端正在请求数据  

eventTester("suspend");     //延迟下载  

eventTester("abort");       //客户端主动终止下载（不是因为错误引起），  

eventTester("error");       //请求数据时遇到错误  

eventTester("stalled");     //网速失速  

eventTester("play");        //play()和autoplay开始播放时触发  

eventTester("pause");       //pause()触发  

eventTester("loadedmetadata");  //成功获取资源长度  

eventTester("loadeddata");  //  

eventTester("waiting");     //等待数据，并非错误  

eventTester("playing");     //开始回放  

eventTester("canplay");     //可以播放，但中途可能因为加载而暂停  

eventTester("canplaythrough"); //可以播放，歌曲全部加载完毕  

eventTester("seeking");     //寻找中  

eventTester("seeked");      //寻找完毕  

eventTester("timeupdate");  //播放时间改变  

eventTester("ended");       //播放结束  

eventTester("ratechange");  //播放速率改变  

eventTester("durationchange");  //资源长度改变  

eventTester("volumechange");    //音量改变