H5学习系列之Audio和Video
1、视频文件：音频轨道、视频轨道和一些元数据（视频封面、标题、子标题、字幕等相关信息）。
2、目前H5还不支持的：流式音频和视频（H5对视频的支持只限于加载的全部媒体文件）、H5的媒体收到跨域资源共享的限制、全屏无法通过脚本控制。
3、检测浏览器是否具有播放视频的功能
var canPlay = document.createElement("video").canPlayType;
if (canPlay) {alert("ok");}
else {alert('error');} //其实就是检测浏览器是否具有canplaytype函数
4、audio
<audio controls src="/张含韵 - 问别.mp3">
An audio clip from johann sebastian bach
</audio>
代码中controls 特性告诉浏览器显示通过的用户控制（开始、停止、跳播、以及音量控制），她之间的内容是为不支持audio元素的浏览器准备的替换内容
<audio controls >
<source src="" />
<source
src="" />
An audio clip from johann sebastian bach
</audio>
浏览器根据自身播放能力自动选择，挑选最贱的来源进行播放
autoplay属性：加载完成后自动播放（ios不支持）
5、var docu = document.getElementById("audio");//同时适用于video这些属性他们两个相同
var duration = docu.duration;//整个媒体的播放时常 以s为单位
var paused = docu.paused;//如果媒体文件当前被暂停（或者未播放），返回true
var ended = docu.ended;//如果文件已经播放完毕了返回true
var currentSrc = docu.currentSrc;//以字符串形式返回当前正在播放文件对应于浏览器在source元素中选择的文件
//以上都是只读属性
docu.autoplay = true;//查询或者设置自动播放
docu.loop = true;//查询或者设置循环播放
docu.currentTime = "30";//查询或者只当前播放的位置
docu.controls = true;//查询或者设置用户与控制界面
docu.volume = 0.5;//查询或者设置音量0.0到1.0
docu.muted = false;//查询或者设置是否静音
docu.autobuffer = true;//通知播放器在媒体文件开始播放前，是否进行缓冲加载。（如果媒体文件已设置为autoplay，则忽略此属性）
6、video特有的属性
poster ：在视频加载完成之前 图片得url；
width、height：读取或设置显示尺寸。如果设置的宽度与视频本身不匹配，可能导致居中显示，上下或者左右可能出现黑色条状区域。
videowidth、videoHeight:返回视频的固有或者自适应的宽度和高度(只读)
onloadstart //客户端开始请求数据
onprogress //客户端正在请求数据
onsuspend //延迟下载
onabort //客户端主动终止下载（不是因为错误引起）
onerror //请求数据时遇到错误
onstalled //网速失速
onplay //play()和autoplay开始播放时触发
onpause //pause()触发
onloadedmetadata //成功获取资源长度
onloadeddata //
onwaiting //等待数据，并非错误
onplaying //开始回放
oncanplay //可以播放，但中途可能因为加载而暂停
oncanplaythrough //可以播放，歌曲全部加载完毕
onseeking //寻找中
onseeked //寻找完毕
ontimeupdate //播放时间改变
onended //播放结束
onratechange //播放速率改变
ondurationchange //资源长度改变
onvolumechange //音量改变
以上所有事件都是可以捕捉到的
