关于video、audio的思考

你可以使用video去承载audio内容，但是auido显然更加适合音频去使用

Attributes

不常用：

• buffered返回表示视频已缓冲部分的 TimeRanges 对象
• crossorigin设置或返回视频的 CORS 设置（是否请求带证书）
• played返回已播放部分TimeRanges对象

还可以：

• autoplay自动播放（尽量避免、兼容性也不高）
• muted初始静音
• preload页面加载好后自动加载[auto/metadata/none]
  即[整个视频/元数据/不加载]

常用：

• controls包含音量查询暂停播放等按钮的控制条
• height像素高度，不能百分比
• width像素宽度，不能百分比
• poster未播放时的海报（低端机型需考虑兼容性问题）
• src视频url
• playsinline页内播放不全屏

注TimeRanges表示用户已经播放或看到的音频/视频范围。

---

Events

不常用：

• abort重新播放触发
• canplay当有足够data可以播放
  当readyState=HAVE_ENOUGH_DATA（ios等机型不会触发）
• canplaythrough整个视频基本可以不中断播放
  当readyState=CAN_PLAY_THROUGH
• durationchange总时长改变，元数据加载/改变触发
• ended播放完毕
• error播放出现错误
• progess视频一点点下载会间歇性的触发该事件
• ratechange播放比率更换
• seeked查询操作完成
• seeking查询操作开始
• stalled尝试获取视频数据结果没有反馈
• suspend缓冲视频突然停止（加载完成或暂停可能会触发）
• volumechange音量变更触发（大小静音）
• waiting搁置中队列中有别的请求操作

还可以：

• loadeddata已加载好数据
• loadedmetadata已加载好元数据
• loadstart开始加载
• timeupdate currentTime变更触发。

常用：

• pause暂停
• play播放。

---

其他bb

资源引入通过src或者source标签的方式都可。

组合使用loadeddata+loadedmetadata可以用于判断媒体文件加载后触发，但仍不能全部覆盖，特殊情况需要考虑降级处理。

事件流触发的顺序：

1. onloadstart
2. ondurationchange
3. onloadedmetadata
4. onloadeddata
5. onprogress
6. oncanplay
7. oncanplaythrough

---

参考文献

Audio在移动端的兼容性问题