唯一合法的分段方式是track kind="chapters"，需配合含/标题的WebVTT文件、正确HTML结构（track置于source后）、服务端返回text/vtt MIME类型，否则章节功能静默失效。
track kind="chapters" 是唯一合法的分段说明方式
浏览器只认 kind="chapters" 这一种能触发视频进度条章节标记的 track 类型。用 kind="subtitles" 或 kind="metadata" 都不会在播放器 UI 上生成可点击的章节导航栏——哪怕内容格式完全一样，浏览器也直接忽略。
常见错误现象：字幕轨道能显示文字，但进度条下方始终空白；右键菜单里没有“章节”选项；video.textTracks[0].mode 始终是 "disabled"。
-
kind必须严格写成"chapters"（全小写，无空格） -
srclang对 chapters 无效，可省略或留空（设了也不会报错，但无意义） -
label会被显示在右键菜单中，建议写成“章节列表”或“目录” - 不能加
default属性——浏览器禁止默认启用 chapters 轨道
WebVTT 文件必须含层级结构和标题语法
普通字幕 VTT 只要时间轴+文本就行，但 chapters 要求首行后必须有至少一个 h1 或 h2 标签包裹的标题，否则浏览器认为“不是章节文件”，静默禁用该轨道。
示例 chapters.vtt 正确写法：
WEBVTT 00:00:00.000 --> 00:00:05.000 <h1>开场介绍</h1> 00:00:05.000 --> 00:01:20.000 <h2>安装步骤</h2> 00:01:20.000 --> 00:03:45.000 <h2>配置说明</h2>
关键点：
- 每个时间块只能有一行，且必须以
或开始、以或结束 - 不支持
h3及以下，也不支持内联样式或 class - 时间戳必须连续覆盖整个视频时长，否则末尾部分无法跳转
- 文件仍需 UTF-8 无 BOM，首行严格为
WEBVTT（全大写、顶格、无空格）
HTML 中 track 必须放在 source 之后、video 闭合前
哪怕结构只错一个位置，章节功能就彻底失效：比如 track 写在 source 前面、嵌套在 div 里、或者动态用 JS 插入到已渲染的 video 中——所有这些都会导致浏览器跳过解析，Network 面板里甚至看不到 .vtt 请求。
正确结构只有这一种顺序：
<video controls><source src="demo.mp4" type="video/mp4"><track kind="chapters" src="chapters.vtt" label="目录"></track></source></video>
- 多个
track可并列，但都必须紧贴在最后一个后面 - 中间不能插入注释、空行或任何非
track元素 - 路径必须可访问：跨域需服务端返回
Access-Control-Allow-Origin: *，本地文件协议（file://）下多数浏览器会因 CORS 拒绝加载
章节不可见？先检查 textTracks.mode 和 MIME 类型
即使 HTML 和 VTT 都写对了，章节仍不出现，大概率卡在这两个地方：
- 服务端没返回
Content-Type: text/vtt—— Nginx/Apache 需显式配置 .vtt 后缀的 MIME 类型，否则 Chrome/Firefox 直接拒绝解析 -
video.textTracks[0].mode是"disabled"而非"showing"或"hidden"：说明浏览器识别出这是 chapters 轨道，但因格式/路径问题主动禁用了它，此时console.log(video.textTracks)会显示readyState === 0（failed to load）
调试建议：打开开发者工具 Network 标签页，过滤 .vtt，确认请求状态码是 200 且 Response Headers 含 content-type: text/vtt；再在 Console 执行 video.textTracks[0].onload = () => console.log('loaded')，看是否触发。
最易被忽略的是服务端 MIME 配置——它不报错、不警告，只是让整个章节功能静默消失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
