html5之video(audio)api

背景

在html4时代实现播放音频和视频的方法

<object classid="clsid:xxxxxx" width="500" height="900" codebase="">
    <parem name="" value="">
    <embed type="" width="" height="" src="" allowscriptaccess="" allowfullscreen=""></embed>
</object>

在html5时代实现的方案

##video
<video>
    <source src="" type="" codecs=""></source>    
</video>


##audio
<audio src="">
    你的浏览器不支持audio元素
</audio>

公共属性

• src：指定媒体数据的src

• autoplay: 是否在页面加载完毕之后自动播放

• preload:none/metadata/auto ：表示是否进行预加载

• none: 表示不进行预加载

• metadata:表示只预加载媒体的元数据

• auto:使用方法 preload="auto"

• loop：重复播放

• controls：是否为视频和音频添加浏览器自带的播放用的控制条。

• error:在发生错误的时候，会返回一个MediaError对象，该对象的code返回对应的错误状态

• networkStatus:数据加载过程中读取当前网络状态。

• currentSrc: 读取播放器中的媒体数据的url地址（只读）

• buffered: 

• readyStatus: 返回媒体当前播放位置的就绪状态

• seeking: 表示是否正在请求某一特定播放位置的数据，true/false 

• seekable: 返回一个TimeRanges对象，表示请求到的数据的时间范围

• currentTime：获取到媒体当前播放位置。

• startTime: 读取媒体播放的开始位置

• duration:读取媒体总的播放时间

• played:返回一个TimeRanges对象，读取媒体已经播放部分的时间段

• paused：返回一个布尔值，表示是否处于暂停状态 true/false

• ended: 返回一个布尔值，表示是否已经播放完毕 true/false

• defaultPlaybackRange：获取和修改媒体默认的播放速度

• playbackRange: 读取和修改媒体当前的播放速度

• volume:读取和修改媒体的播放音量

• muted: 修改和读取媒体的禁音状态
  

私有属性

video

• poster:当视频不可用的时候，可用使用一个图片替代它。

• width:宽度

• height:高度
  

公共方法

• play  播放媒体， 自动将元素的paused属性变为false

• pause   暂停媒体， 自动将元素的paused属性变为true

• load     使用这个方法重新载入媒体进行播放。自动将元素的playbackRate属性值变为defalutPlaybackRate的值，自动将error的值变为null

• canPlayType: 测试浏览器是否支持指定的媒体类型 /""/maybe/probably

事件介绍

loadstart:  开始网上查找媒体数据

progerss  正在获取媒体数据

suspend   浏览器暂停获取数据，但是下载过程并没有结束

abort   停止下载媒体数据

error 出错误

emptied 突然变为未初始化状态。

stalled  浏览器尝试获取媒体数据失败

play 即将开始播放

pause 播放暂停

loadedmetadata 浏览器获取完毕媒体的时间长和字节数

waiting 播放过程由于得不到下一帧而暂停，但很快就能获取到下一帧

playing 正在播放

canplay 浏览器能够播放媒体

seeking seeking为true 表示正在获取媒体

seeked seeking变为false，浏览器停止请求数据

timeupdate 当前播放位置发生改变

ended 播放结束后停止播放

ratechange defaultplaybackRate属性或者playbackRate属性被改变。

durationchange 播放时长被改变

volumechange volume属性被改变或者 muted属性被改变的时候触发