html5基础---音视频
1. video&audio基础用法
<video src="" control="controls" width="" height=""></video>
<!-- width、height不指定默认为视频撑开，取决于像素
controls:该属性定义是显示还是隐藏用户控制界面 -->
<audio src="" control="controls"></video>
<!-- 兼容性写法 -->
<video controls width="300" height="300">
<source src="resource/video/OUTPUT.mp4" type="video/mp4"></source>
<source src="resource/video/OUTPUT.ogv" type="video/ogg"></source>
<source src="resource/video/OUTPUT.webm" type="video/webm"></source>
当前浏览器不支持video直接播放，点击这里下载视频：<a href="resource/video/OUTPUT.mp4">下载视频</a>
</video>
<audio controls >
<source src="resource/audio/OUTPUT.mp3" type='audio/mpeg'></source>
<source src="resource/audio/OUTPUT.aac" type='audio/aac; codecs="aac"'></source>
<source src="resource/audio/OUTPUT.ogg" type='audio/ogg; codecs="vorbis"'></source>
当前浏览器不支持audio直接播放，点击这里下载视频：<a href="resource/audio/OUTPUT.mp3">下载视频</a>
</audio>
<!--
视频：
type='video/webm; codecs="vp8, vorbis"'
type='video/ogg; codecs="theora, vorbis"'
type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
音频：
type='audio/ogg; codecs="vorbis"'
type='audio/aac; codecs="aac"'
type='audio/mpeg'
-->
音视频相关简介、兼容性与编解码方式见此处
2. 音视频的attribute
· video
width : 视频显示区域的宽度，单位是CSS像素
height : 视频展示区域的高度，单位是CSS像素
src : 要嵌到页面的视频的URL
poster : 一个海报帧的URL，用于在用户播放或者跳帧之前展示
controls : 显示或隐藏用户控制界面
autoplay : 媒体是否自动播放
loop : 媒体是否循环播放
muted : 是否静音
preload : 该属性旨在告诉浏览器作者认为达到最佳的用户体验的方式是什么
none : 提示作者认为用户不需要查看该视频，服务器也想要最小化访问流量；
换句话说就是提示浏览器该视频不需要缓存。
metadata : 提示尽管作者认为用户不需要查看该视频; 常用
不过抓取元数据（比如：长度）还是很合理的。
auto : 用户需要这个视频优先加载；
换句话说就是提示：如果需要的话，可以下载整个视频，即使用户并不一定会用它。
空字符串 ：也就代指 auto 值。
· audio
除无width、height、poster属性外，其他与video相同。
3. 音视频property
· 通用
duration : 媒体总时间(只读)
chrome等浏览器刚开始取值为NaN,需要等视频信息加载（延时或者绑定事件）
currentTime : 开始播放到现在所用的时间(可读写)
muted : 是否静音(可读写,相比于volume优先级要高)
volume : 0.0-1.0的音量相对值(可读写)
muted和volume 不会实时同步，设置muted时需再手动设置volume
paused : 媒体是否暂停(只读)
ended : 媒体是否播放完毕(只读)
error : 媒体发生错误的时候，返回错误代码 (只读)
currentSrc : 以字符串的形式返回媒体地址(只读)
· video特有的
poster : 视频播放前的预览图片(读写)
width、height : 设置视频的尺寸，即标签的尺寸(读写)
videoWidth、 videoHeight : 视频的实际尺寸(只读)
4. 音视频相关函数
play() : 媒体播放
pause() : 媒体暂停
load() : 重新加载媒体 ---- 通过source标签更改的src，需要重新load才能生效
5. 相关事件
· video && audio
abort : 在播放被终止时触发。例如, 当播放中的视频重新开始播放时会触发这个事件。
canplay : 在媒体数据已经有足够的数据（至少播放数帧）可供播放时触发。
这个事件对应CAN_PLAY的readyState。
canplaythrough : 在媒体的readyState变为CAN_PLAY_THROUGH时触发。
表明媒体可以在保持当前的下载速度的情况下不被中断地播放完毕。
注意：手动设置currentTime会使得firefox触发一次canplaythrough事件，其他浏览器或许不会如此。
durationchange : 元信息已载入或已改变，表明媒体的长度发生了改变。
例如，在媒体已被加载足够的长度从而得知总长度时会触发这个事件。
emptied : 媒体被清空（初始化）时触发。
ended : 播放结束时触发。
error : 在发生错误时触发。元素的error属性会包含更多信息。参阅Error handling获得详细信息。
loadeddata : 媒体的第一帧已经加载完毕。
loadedmetadata : 媒体的元数据已经加载完毕，现在所有的属性包含了它们应有的有效信息。
loadstart : 在媒体开始加载时触发。
mozaudioavailable : 当音频数据缓存并交给音频层处理时
pause : 播放暂停时触发。
play : 在媒体回放被暂停后再次开始时触发。即，在一次暂停事件后恢复媒体回放。
playing : 在媒体开始播放时触发（不论是初次播放、在暂停后恢复、或是在结束后重新开始）。
progress : 告知媒体相关部分的下载进度时周期性地触发。有关媒体当前已下载总计的信息可以在元素的buffered属性中获取到。
ratechange : 在回放速率变化时触发。
seeked : 在跳跃操作完成时触发。
seeking : 在跳跃操作开始时触发。
stalled : 在尝试获取媒体数据，但数据不可用时触发。
suspend : 在媒体资源加载终止时触发，这可能是因为下载已完成或因为其他原因暂停。
timeupdate : 元素的currentTime属性表示的时间已经改变。
volumechange : 在音频音量改变时触发（既可以是volume属性改变，也可以是muted属性改变）。
waiting : 在一个待执行的操作（如回放）因等待另一个操作（如跳跃或下载）被延迟时触发。
