通过HTML5的< track >标签可为< video >添加WebVTT字幕等文本轨道，需准备UTF-8无BOM的.vtt文件（首行为WEBVTT，含序号、时间轴和文本），并在< video >内嵌套< track >元素，正确设置kind、src、srclang、label和default等属性。
通过 HTML5 的 <track> 标签，可以为 <video> 元素添加 WebVTT 格式的字幕、章节、描述、字幕（captions）、说明（descriptions）等文本轨道。关键在于正确设置属性并提供符合规范的 .vtt 文件。
1. 准备符合规范的 WebVTT 文件
WebVTT（Web Video Text Tracks）文件是纯文本，以 WEBVTT 开头，每段内容由序号、时间轴和文本组成，用空行分隔。示例（subtitles.en.vtt）：
1
00:00:01.000 --> 00:00:04.500
Hello, welcome to the demo.
2
00:00:05.000 --> 00:00:08.200
This is a sample subtitle.
注意：
- 时间格式为 HH:MM:SS.mmm（毫秒三位）
- 文件必须 UTF-8 编码，且无 BOM
- 保存为 .vtt 后缀（如 chapters.vtt、descriptions.vtt）
2. 在 video 标签中使用 track 标签
<track> 必须作为 <video> 的子元素，且放在 <source> 之后。常用属性包括：
-
kind：指定轨道类型，可选值有
subtitles（字幕，用户可选）、captions（带声音描述的字幕，适合听障）、descriptions（音频描述，供视障用户）、chapters（章节导航）、metadata（脚本可读元数据，不显示） - src：指向 .vtt 文件的相对或绝对路径（必须同源或启用 CORS）
-
srclang：语言代码（如
en、zh），仅对subtitles/captions有效 - label：在播放器轨道菜单中显示的名称（如 “English Subtitles”）
-
default：布尔属性，设为
default表示默认启用（仅对subtitles和captions推荐；chapters不应设 default）
完整示例：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
<video controls width="640" height="360"><source src="movie.mp4" type="video/mp4">
<track kind="subtitles" label="English" srclang="en" src="subtitles.en.vtt" default>
<track kind="subtitles" label="中文" srclang="zh" src="subtitles.zh.vtt">
<track kind="chapters" label="Chapters" src="chapters.vtt">
<track kind="descriptions" label="Audio Description" srclang="en" src="desc.en.vtt">
</video>
3. 章节（chapters）的特殊用法
当 kind="chapters" 时，WebVTT 文件需使用 chapter 类型的时间提示，并支持标题层级（用 <h1>–<h6> 或缩进模拟结构）。浏览器会在进度条上方显示章节标记，点击可跳转。
chapters.vtt 示例：
WEBVTT1
00:00:00.000 --> 00:01:30.000
Chapter 1: Introduction
2
00:01:30.000 --> 00:05:45.000
Chapter 2: Main Content
注意：目前仅 Safari 和部分新版 Chrome/Edge 支持章节 UI 渲染，Firefox 暂不显示可视化章节栏，但可通过 JS 读取轨道数据。
4. 常见问题与验证要点
- 确保 .vtt 文件能被浏览器直接访问（测试方法：在浏览器地址栏输入 vtt 路径，应看到纯文本内容，而非下载或 404）
- 跨域加载需服务端返回
Access-Control-Allow-Origin: *（尤其用 CDN 或不同域名托管 vtt 时） - 字幕不显示？检查控制台是否有 CORS 或解析错误；确认
kind和srclang匹配用户系统语言或播放器手动选择了对应轨道 - 使用 JavaScript 动态控制轨道：
video.textTracks[0].mode = "showing"可强制启用某轨道（"disabled"/"hidden"/"showing"）
