概述
<video> 和 <audio> 是HTML5提供的音视频播放的标签和标准接口
和以往的音视频播放对比：
- 以往 - FlashPlayer(独立于浏览器的一个插件, 非标准私有技术)
<video> ****和 <audio> 相当于浏览器提供的一种标准规范的音视频技术
为什么使用 <video> 和 <audio>，而不是 FlashPlayer ？
- FlashPlayer 加载时间长和性能较差, 而新增的 video 和 audio API 加载时间更短，性能更高
- FlashPlayer 存在安全性的问题 (浏览器上的权限问题, 容易遭受黑客的攻击)
- FlashPlayer 升级问题(C/S模型), 需要不断地更新和打补丁，而 video 和 audio 几乎开箱即用！
音视频对应的支持格式：
- 视频支持格式类型
| 视频类型 | 对应支持格式 | 支持的浏览器 |
|---|
| OGG | THEORA & VORBIS | FIREFOX、OPERA、CHROME |
| MPEG4 | H264 & AAC | IE(部分支持) 、CHROME 、SAFARI |
| WEBM | VP8 & VORBIS | FIREFOX OPERA CHROME |
- 音频支持格式类型
| 音频类型 | 对应支持格式 | 支持的浏览器 |
|---|
| OGG | VORBIS | FIREFOX,OPERA,CHROME |
| MPEG4 | AAC | IE(部分支持) CHROME SAFARI |
| WAV | - | FIREFOX OPERA CHROME |
基本使用：
<video src="xxx.mp4" controls></video>
<audio src="xxx.mp3" controls></audio>
| 属性 | 说明 | 值 |
|---|
autoplay | 是否自动播放音视频 | true | false |
controls | 是否显示音视频控件 | "controls" |
height | 视频容器的高(仅视频) | number |
width | 视频容器的宽(仅视频) | number |
loop | 是否循环播放视频 | "loop" |
preload | 音视频的预加载(不能和autoplay一起使用) | "preload" |
src | 音视频资源来源路径 | "string" |
对于低版本浏览器的兼容性写法：
对于低版本不支持 <video> / <audio> 的浏览器, 我们可以把提示语局现在标签内部
<video src="1.mp4">
您的浏览器不支持video标签
</video>
多资源播放：
video 下如果有多个资源, 可以在内部嵌入 <source> 标签, 浏览器会选择目前最兼容的方式进行播放 （<audio> 同理）
<video width="320" height="160">
<source src="1.mp4" type="video/mp4" />
<source src="1.ogg" type="video/ogg" />
<source src="1.webm" type="video/webm" />
</video>
音视频API（重点部分）
| 属性 / 方法 | 说明 | 取值 |
|---|
load() | 操作加载（重加载）视频 / 音频 | function |
play() | 播放视频 / 音频 | function |
pause() | 暂停视频 / 音频 | function |
enterfullscreen() | 进入全屏模式 | function |
exitfullscreen() | 退出全屏模式 | function |
currentTime | 获取 & 设置视频 / 音频进度 | number |
duration | 视频 / 音频的总长度 | number |
paused | 判断视频是否处于暂停状态 | boolean |
muted | 获取 & 设置视频 / 音频是否静音 | boolean |
volume | 获取 & 设置视频 / 音频的音量 | 0 ~ 1 |
playbackRate | 视频 / 音频的播放速率 (默认为 1 ，建议使用(0.5 1 1.25 1.5 2)) | number |
buffered | 视频加载的进度，接近时需要提示缓冲视频 | --- oVideo.buffered.end(0) --- |
onseeked | 用户拖动视频进度条会触发的事件 | callback function |
oncanplay | 判断视频是否可以播放的事件监听事件src 修改时校验触发 | callback function |
onended | 判断视频是否播放结束的监听事件 | callback function |
onerror | 视频播放出错时会触发的事件处理函数 | callback function |
onratechange | 视频倍数改变时触发的事件 | callback function |
onvolumechange() | 视频音量改变时触发的事件处理函数 | callback function |
