HTML5：音频和视频-一一网

Audio 音频

HTML <audio> 元素用于在文档中嵌入音频内容，可以包含一个或多个音频资源。有两种添加音频资源的方式：

src 属性，添加了嵌入媒体的路径，比如 <audio src="https://juejin.cn/post/audio.mp3">
<source> 元素，指定多个媒体资源，用于以不同浏览器支持的多种格式提供相同的媒体内容：
```
<source src="horse.ogg" type="audio/ogg" />
<source src="horse.mp3" type="audio/mpeg" />
复制代码
```

支持的音频格式

格式	MIME-type
MP3	audio/mpeg
Ogg	audio/ogg
Wav	audio/wav

其他的属性：

autoplay，布尔属性，允许音频尽快地自动播放，不会等待整个音频文件下载完成。

注意： 自动播放可能会破坏用户体验，慎用。
controls，浏览器将提供一个包含声音，播放进度，播放暂停的控制面板，让用户可以控制音频的播放。
loop，布尔属性，是否循环播放音频。
muted，是否静音，默认是 false，表示有声音。
preload，示意浏览器使用何种加载方式，该属性只是一个建议与提示，浏览器也可能不遵循。
- none，该音频不会被缓存（用户可能不会播放该音频，或者服务器希望节省带宽）。
- metadata，只获取获取元数据 (例如音频长度)。
- auto，音频会被全部加载。
注意：autoplay 属性的优先级高于 preload。只要 autoplay 被指定，浏览器就会显式地开始下载媒体以供播放。
currentTime，当前音频的播放位置（以秒为单位）
duration 只读，音频在时间轴中的持续时间（总长度），以秒为单位。
- 音频不存在，返回 NaN
- 音频无确定结尾，返回 +Infinity
crossorigin，是否可以通过 CORS 加载（支持 CORS 的资源可以被 <canvas> 元素复用而不污染）。
- anonymous，默认，在发送跨域请求时不携带验证信息。
- use-credentials，在发送跨域请求时携带验证信息。

Video 视频

HTML <video> 元素用于在文档中嵌入媒体播放器，用于支持文档内的视频播放。同样支持多个视频源（由多个 <source> 元素提供），浏览器将会使用它所支持的第一个源。

<video>
  <source src="myVideo.mp4" type="video/mp4" />
  <source src="myVideo.webm" type="video/webm" />
  <!-- 针对浏览器不支持此元素时候的降级处理。? -->
  <p>Your browser doesn't support HTML5 video.</p>
</video>
复制代码

支持的视频格式

格式	MIME-type
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

与 audio 相同的属性

autoplay
controls
loop
muted
currentTime
duration 只读
crossorigin
preload
src

其他的属性

height / width，设置视频播放器的高度 / 宽度。
buffered，这个属性可以读取到哪段时间范围内的媒体被缓存了。
playsinline，布尔属性，表示在元素的播放区域内。请注意，没有此属性并不意味着视频始终是全屏播放的。
played，指明了视频已经播放的所有范围。
poster，指定了视频正在下载时显示的图像，直到用户点击播放按钮。

Audio/Video 方法

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

Audio/Video 事件

事件名	描述
loadstart	开始加载数据
progress	正在获取数据
suspend	在获取数据的过程中（已开始，未完成），暂停获取动作
abort	在获取数据的过程中（已开始，未完成），终止获取动作（但是并不是由错误引起的）
error	获取数据过程中出错
abort	在获取媒体数据的过程中（已开始，未完成），终止获取动作
stalled	尝试获取媒体数据失败
canplay	能够开始播放但可能因缓冲而需要停止
canplaythrough	能够无需因缓冲而停止即可播放至结尾
durationchange	duration 属性发生了变化。
emptied	媒体置空。比如在已经加载（或部分加载）的情况下调用 `load()` 方法，或网络错误、加载错误等
loadeddata	媒体的第一帧加载完成。
loadedmetadata	元数据加载完成（比如，时间长和字节数）。
pause	播放暂停。执行了 `pause()`。
play	即将播放开始。执行了 `play()`，或设置了 `autoplay` 属性。
waiting	由于得不到下一帧而暂停播放（例如下一帧尚未加载完毕），但很快就能够得到下一帧。
ended	播放到媒体的结束位置，而播放停止。
seeking	`seeking` 属性变为 `true`，浏览器正在请求数据
seeked	`seeking` 属性变为 `false`，浏览器停止请求数据
timeupdate	播放位置改变，可能是播放过程中的自然改变，或是被人为的改变，或由于播放不能连续而发生的跳变等
ratechange	`defaultplaybackRate` 属性（默认播放速率）或 `playbackRate` 属性（当前播放速率）被改变
volumechange	`volume` 属性（音量）被改变或 `muted` 属性（静音状态）被改变