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 //音量改变

以上所有事件都是可以捕捉到的