chapters kind 的 track 必须配合合法 webvtt 文件才能生效，首行为 webvtt，每段含严格格式时间戳（hh:mm:ss.mmm --> hh:mm:ss.mmm）及标题，且服务器需返回 text/vtt mime 类型。
chapters kind 的 track 必须配合 media 时间戳文件才能生效
浏览器不会从 <track></track> 标签里自动提取章节标题——它只认 WebVTT 文件里带 CHAPTER 类型的时间戳块。直接把 kind="chapters" 加在空 <track></track> 上，视频控件里根本不会显示目录。
实操要点：
-
<track></track>的src必须指向一个合法的 .vtt 文件，且该文件首行需为WEBVTT - VTT 文件里不能只有普通字幕，必须用
STYLE或CHAPTER块声明章节；推荐用CHAPTER（更语义化） - 每个章节块格式严格：
00:00:00.000 --> 00:00:15.000后换行，再写标题（不能带 HTML 标签） - 浏览器只读取第一个匹配的
kind="chapters"track；多个时以第一个为准
WebVTT 章节文件怎么写才被识别为目录
错例：把普通字幕当章节用，或时间戳格式不规范（比如漏毫秒、用空格代替 -->），都会导致章节不显示。
正确写法示例（保存为 chapters.vtt）：
WEBVTT 00:00:00.000 --> 00:01:23.456 简介 00:01:23.456 --> 00:03:10.789 安装依赖 00:03:10.789 --> 00:05:44.123 配置 webpack
注意：
- 每段之间必须有空行
- 时间戳必须是
HH:MM:SS.mmm格式，毫秒三位，不能省略 - 标题行不能缩进，不能含
<span></span>或其他标签 - 文件编码必须是 UTF-8，BOM 会导致解析失败
video 元素加了 chapters track，但控件没显示目录？检查这几点
Chrome 和 Safari 支持原生章节控件（通常在进度条上方显示小标题），但 Firefox 不支持——不是你代码错了，是浏览器根本不画那个 UI。
常见失效原因：
-
<video></video>没加controls属性（没控件自然没目录） - VTT 文件 404 或跨域未配 CORS（控制台会报
Failed to load resource） - track 的
srclang被设了值（chapters 不需要语言，留空或删掉） - 服务器返回的 MIME 类型不是
text/vtt（Nginx/Apache 需显式配置） - 时间戳区间重叠或倒置（比如结束时间早于开始时间），整个文件会被忽略
想兼容 Firefox 或自定义样式？得自己解析 VTT
原生章节控件不可编程、不可样式化，且 Firefox 完全不支持。真要稳定可用，得手动加载 VTT、解析时间戳、绑定点击跳转。
简单思路：
- 用
fetch()读取chapters.vtt内容 - 正则匹配
/(\d{2}:\d{2}:\d{2}\.\d{3})\s*-->\s*(\d{2}:\d{2}:\d{2}\.\d{3})\s*\n([^\n]+)/g提取区间和标题 - 生成
<button></button>列表，点击时调用video.currentTime = seconds - 监听
timeupdate事件，高亮当前章节
别指望靠一个 kind="chapters" 就搞定全平台目录——浏览器实现差异太大，关键路径必须自己掌控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
