HTML5 DOM 为 <audio> 和 <video> 元素提供了方法、属性和事件。

这些方法、属性和事件允许您使用 JavaScript 来操作 <audio> 和 <video> 元素。

本文介绍常用的方法、属性、和事件。
更多内容请参考：HTML 音频/视频 DOM 参考手册——菜鸟

---

1、常用的方法

load() 重新加载音频 / 视频元素。
play() 开始播放音频/视频。
pause() 暂停当前播放的音频 / 视频。

2、常用的音频 / 视频 属性

src 设置或返回音频/视频元素的当前来源。
autoplay 自动播放
muted 设置或返回音频/视频是否静音。
defaultMuted 设置或返回音频/视频默认是否静音。
loop 设置或返回音频/视频是否应在结束时重新播放，即：是否循环播放。
preload 设置或返回音频/视频是否应该在页面加载后进行加载。
controller 返回表示音频/视频当前媒体控制器的 MediaController 对象。
controls 设置或返回音频/视频是否显示控件（比如播放/暂停等）。即：是否显示控制条。
volume 设置或返回音频/视频的音量。
buffered 返回表示音频/视频已缓冲部分的 TimeRanges 对象。
played 返回表示音频/视频已播放部分的 TimeRanges 对象。
currentTime 设置或返回音频/视频中的当前播放位置（以秒计）。在谷歌上设置的时候注意，src路径是远程路径时有效。
duration 返回当前音频/视频的长度（以秒计）。
playbackRate 设置或返回音频/视频播放的速度。
defaultPlaybackRate 设置或返回音频/视频的默认播放速度。

---

注释： TimeRanges

TimeRanges 对象表示音视频的已缓冲部分。

TimeRanges 对象属性：

length - 获得音视频中已缓冲范围的数量
start(index) - 获得某个已缓冲范围的开始位置
end(index) - 获得某个已缓冲范围的结束位置

注：首个缓冲范围的下表是 0。
Audio的缓存只有一个分段，开始位置为0，结束位置为timeRange.end(0)。
所以一般在用 buffered 和 played 的时候，要在后边加上.end(0)，如：buffered.end(0) 获取当前截止缓冲的时间。

---

要注意的问题：
有时给 video 设置 autoplay 属性无效

给该 video 标签添加 muted 属性即可。
muted 属性属于逻辑属性，它规定视频的音频输出应该被静音。

这样处理的原因：
高版本浏览器，对视频静音后，可以保证视频自动播放。（如下图）

---

3、常用的事件

onabort 当音频/视频的加载已放弃时触发。一般用于视频意外终止时。
oncanplay 当浏览器可以开始播放音频/视频时触发。
ondurationchange 当音频/视频的时长已更改时触发。
onemptied 当前播放列表为空时触发。一般发生在网络错误或加载错误时。
onended 当目前的播放列表已结束时触发。视频播放结束时。
onloadeddata 当浏览器已加载音频/视频的当前帧时触发。即：加载视频数据的时候。
onloadstart 当浏览器开始查找音频/视频时触发。即：开始加载视频数据的时候。
onpause 当音频/视频已暂停时触发。
onplay 当音频/视频已开始或不再暂停时触发。
onplaying 当音频/视频在因缓冲而暂停或停止后已就绪时触发。正在播放。
onprogress 当浏览器正在下载音频/视频时触发。获取视频数据时。
onratechange 当音频/视频的播放速度已更改时触发。
ontimeupdate 当目前的播放位置已更改时触发。
onvolumechange 当音量已更改时触发。
onwaiting 当视频由于需要缓冲下一帧而停止时触发。等待缓冲时。
onsuspend 在浏览器刻意不加载媒体数据时触发。该事件在媒体数据被阻止加载时触发。 可以是完成加载后触发，或者因为被暂停的原因。
影响媒体数据加载的事件有：abort、emptied、error、stalled。
onstalled 当浏览器尝试获取媒体数据，但数据不可用时触发。

---

4、video的其它操作

（1）全屏显示：requestFullscreen
可以加 button 按钮，添加点击事件来实现，下边是点击事件的回调函数：
（要写兼容性）

    //全屏  requestFullscreenfunction fullScreen() {if (video.requestFullscreen) {video.requestFullscreen();}else if (video.webkitRequestFullRcreen) {video.webkitRequestFullRcreen();}else if (video.mozRequestFullscreen) {video.mozRequestFullscreen();}else {video.msRequestFullscreen();}}

（2）退出全屏：ExitFullscreen
加 button 按钮，添加点击事件来实现，下边是点击事件的回调函数：
（要写兼容性）

    //退出全屏  ExitFullscreenfunction closeFullScreen() {if (video.exitFullscreen) {video.exitFullscreen();}else if (video.webkitCancelFullScreen) {video.webkitCancelFullScreen();}else if (video.mozCancelFullScreen) {video.mozCancelFullScreen();}else {video.msExitFullscreen();}}

（3）下载：
通过给 button 按钮添加点击事件实现。

    function download(){video.downLoad();}

---

5、附： HTML5<video>和<audio>支持的音视频格式

常见的视频格式：

MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

目前， <video> 元素支持三种视频格式： MP4, WebM, 和 Ogg
<audio>元素支持三种音频格式文件: MP3, Wav, 和 Ogg

---