audio/vedio

video(视频)和audio(音频)是一个很棒的媒体标签，代替了flash，兼容pc端、移动端、APP，但是它的api文档很少，网上找了一些也不是很全，正好这次做了个项目就是用到video和audio，也用到了好多接口：监听事件、属性和方法。

先写一下html代码：

video标签写法一：

<video id="media" src="视频地址" controls width="100%" height="300"></video>

video标签写法二：

<video width="100%" height="300" controls="controls">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
</video>

video标签属性

  src：视频的URL
  poster：视频封面，没有播放时显示的图片
  preload：没有播放时预加载(设置autoplay属性时失效)
  autoplay：页面加载自动播放(移动端失效，微信里面需要用微信接口可以自动播放)
  loop：循环播放
  controls：浏览器自带的控制条
  width：视频宽度
  height：视频高度

audio标签写法一：

<audio id="media" src="音频地址" controls></audio>

audio标签写法二：

<audio controls="controls">
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
</audio>

audio标签属性：

  src：音乐的URL
  preload：没有播放时预加载(设置autoplay属性时失效)
  autoplay：页面加载自动播放(移动端失效，微信里面需要用微信接口可以自动播放)
  loop：循环播放
  controls：浏览器自带的控制条

javascript代码：

//获取audio和video的标签

var oMedia=document.getElementById("media");

属性：

属性(用法如：oMedia.error) 说明

error	null:正常
error.code	1.用户终止 2.网络错误 3.解码错误 4.URL无效
currentSrc	返回当前资源的URL
src(常用)	返回或设置当前资源的URL
networkState	0.此元素未初始化  1.正常但没有使用网络  2.正在下载数据  3.没有找到
buffered	返回已缓冲区域
preload	没有播放时预加载(设置autoplay属性时失效)
readyState	1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA
seeking	是否正在seeking
currentTime(常用)	当前播放的位置，赋值可改变位置
startTime	一般为0，如果为流媒体或者不从0开始的资源，则不为0
duration(常用)	当前资源长度 流返回无限
paused(常用)	是否暂停
defaultPlaybackRate	默认的回放速度，可以设置
playbackRate	当前播放速度，设置后马上改变。1.0 正常速度，0.5 半速（更慢），2.0 倍速（更快），-1.0 向后，正常速度，-0.5 向后，半速
played(常用)	是否在播放
seekable	返回可以seek的区域
ended(常用)	是否结束（实际开发中可以用于判断当前媒体播放结束后，跳转下一个或上一个）
autoPlay(常用)	页面加载自动播放(移动端失效，微信里面需要用微信接口可以自动播放)
loop	是否循环播放
controls	是否有默认控制条
volume	音量：1.0 是最高音量（默认），0.5 是一半音量 （50%），0.0 是静音
muted	静音

方法：

方法(用法如：oMedia.paly()) 说明

play()(常用)	播放
pause()(常用)	暂停
start(index)	第index段区域的开始位置
end(index)	第index段区域的结束位置
canPlayType(type)	是否能播放某种格式的资源

监听事件：

代码示例：

//play()和autoplay开始播放时触发
oMedia.addEventListener("play",function(){  
    //在这里写代码
});

事件说明

loadstart	客户端开始请求数据
progress	客户端正在请求数据
error	请求数据时遇到错误 
stalled	网速失速
play(常用)	play()和autoplay开始播放时触发
pause(常用)	暂停时触发
loadedmetadata	当指定的音频/视频的元数据已加载时，会发生 loadedmetadata 事件。
loadeddata	当当前帧的数据已加载，但没有足够的数据来播放指定音频/视频的下一帧时，会发生 loadeddata 事件。
waiting(常用)	等待数据，并非错误（实际开发中网速慢时出现loading图标在这里写代码）
playing(常用)	正在播放时触发。（实际开发中获取“当前时长”和“总时长”在这里写代码）
canplay	可以播放，但中途可能因为加载而暂停
canplaythrough	可以播放，歌曲全部加载完毕
seeking	当用户开始移动/跳跃到音频/视频中的新位置时
seeked	当用户已移动/跳跃到音频/视频中的新位置时
timeupdate	播放时间改变
ended(常用)	播放结束
ratechange	播放速率改变
durationchange	资源长度改变
volumechange	音量改变