随着互联网的普及和带宽的提高，视频已成为网络媒体内容的重要组成部分。在HTML5中，我们可以使用video 标签嵌入视频。
本节我们学习使用HTML5的方式播放视频。
HTML5 引入了 <video>标签，作为一种标准的video播放方式。
代码：<video style="height: auto;width: 90%;" src="yourmusic.mp4" controls></video>
实例解析：我们定义了一个 video 标签，其中的 src 属性指向要播放的视频文件的路径，并添加了 controls 属性表示在播放器中显示控制条。可以通过CSS控制播放器的样式。
为了更好的用户体验，处理部分旧版本浏览器的兼容问题，我们可以添加source标签来引入多个视频格式。
实例中浏览器会跳过不支持的格式，选择可以播放的格式，若全都不支持，会显示p标签的内容
| 属性 | 描述 | |
|---|---|---|
| autoplay | 如果出现该属性，则视频在就绪后马上播放。 | |
| controls | 如果出现该属性，则向用户显示控件（比如播放/暂停按钮）。 | |
| defaultMuted | 设置或返回视频默认是否静音。 | |
| defaultPlaybackRate | 设置或返回视频的默认播放速度。 | |
| loop | 如果出现该属性，则每当音频结束时重新开始播放。 | |
| muted | 如果出现该属性，则音频输出为静音。 | |
| mediaGroup | 设置或返回视频所属媒介组合的名称。 | |
| preload | 规定当网页加载时，视频是否默认被加载以及如何被加载。 | |
| src | url | 规定视频文件的 URL。 |
HTML5提供了一个极其丰富的视频API，专门用于操作视频播放器。通过这API，我们可以实现播放/暂停/快进/音量/时间/列表播放等功能。
使用方法：（使用JavaScript调用）
获取视频对象，例：const video = document.querySelector('video');
通过对象调用各种方法，例如：播放/暂停/快进/音量/时间/列表播放等
| 属性|方法 | 类型 | 说明 |
|---|---|---|
| paused | 属性 | 播放器当前状态：播放or暂停 |
| play | 方法 | 控制播放器实施播放 |
| readyState | 属性 | 返回播放器的状态：
0 - 当前 没有关于视频的可用数据
1 - 当前已获取视频的meta数据
2 - 当前可以开始在“加载"期间进行播放
3 - 当前可以开始播放（缓冲时）
4 - 当前已经缓冲足够的数据，可以进行无间断的播放 |
| addEventListener | 方法 | 监听视频的播放状态 |
| currentTime | 属性 | 单位：秒，调节值大小控制播放进度，快进或跳转 |
详细情况请查阅HTML5 API
HTML5 中，我们可以通过 VTT（WebVTT）文件格式来为视频添加字幕。VTT 是一种文本文件格式，可以在开始时间和结束时间之间指定要显示的字幕内容
要为视频添加字幕，我们首先需要创建一个 VTT 文件：
然后，我们需要在 video 元素中添加 track 标签来引入字幕文件：
在这里，我们使用 kind 属性来指定这个 track 是字幕（subtitles），并使用 src 属性来指定 VTT 文件的路径，srclang 属性指示字幕语言，label 属性为字幕设置标签。
还需要在 CSS 文件中设置字幕的样式：
在这段代码中，我们使用 ::cue 伪元素来设置字幕的样式。
