HTML中唯一标准方案是标签配合WebVTT章节文件实现章节式字幕，必须作为子元素且kind="chapters"，WebVTT需以WEBVTT开头、每段cue前加CHAPTER标识、时间格式严格为HH:MM:SS.mmm。
HTML 中 <track></track> 标签是唯一标准方案
浏览器原生支持的章节式字幕，只能靠 <track></track> 配合 WebVTT 文件实现。它不支持直接写在 HTML 里，也不能用 <div> 或 <code><span></span> 模拟——那样既没时间轴控制，也触发不了播放器的字幕菜单，更无法响应 toggle、kind="chapters" 这类语义。
关键点：<track></track> 必须作为 <video></video> 的子元素，且 kind="chapters" 才能被识别为章节导航条（不是普通字幕）。
-
kind="chapters"：告诉浏览器这是章节轨道，播放器会在进度条上方渲染章节标记（如 Safari、Edge 原生支持；Chrome 需配合showing状态才显示） -
srclang和label是可选但推荐的，用于多语言章节或 UI 显示名 -
default属性会让该章节轨道默认启用（用户无需手动打开）
WebVTT 文件必须包含 CHAPTER 类型 cue
普通字幕用 WEBVTT + 时间轴文本就行，但章节需要明确声明类型。文件开头必须写 WEBVTT，每段 cue 前加 CHAPTER 标识，否则浏览器会忽略为无效章节。
示例 chapters.vtt：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
WEBVTT CHAPTER 00:00:00.000 --> 00:02:15.000 片头 CHAPTER 00:02:15.000 --> 00:18:30.000 第一部分：背景介绍 CHAPTER 00:18:30.000 --> 00:45:20.000 第二部分：实操演示
注意：CHAPTER 行不能有空格或注释；时间格式严格为 HH:MM:SS.mmm；cue 文本不能跨行（否则可能被截断）。
章节在播放器中是否可见，取决于浏览器和 default 状态
不是所有浏览器都把 kind="chapters" 渲染成可视进度条分段。Safari 最完整：自动在时间轴上打点+悬停显示标题；Chrome 仅在右键“章节”菜单里列出，且需手动启用；Firefox 不显示图形化章节条，只支持键盘快捷键跳转（Shift+→）。
- 如果想强制用户看到章节，得监听
timeupdate事件，自己读取当前时间并匹配 VTT 中的 cue 范围，再更新自定义 UI -
default属性只影响是否默认启用轨道，不影响视觉呈现——即使设了default，Chrome 依然不显示章节条 - 移动端（iOS Safari）支持良好；Android Chrome 几乎不展示章节 UI，仅提供 API 访问
常见失败原因：路径、MIME 类型、CORS
即使标签和 VTT 写对了，章节也不出现，八成卡在这三处：
-
<track src="chapters.vtt"></track>的路径是相对 video 当前路径，不是 HTML 页面路径；建议用绝对路径或检查 Network 面板看是否 404 - Web 服务器必须返回
text/vttMIME 类型，否则 Chrome/Firefox 直接拒绝加载；Nginx 需加types { text/vtt vtt; }，Apache 加AddType text/vtt .vtt - 如果 video 和 .vtt 在不同域名下，需服务端返回
Access-Control-Allow-Origin，否则 track 加载失败且无明显报错（仅控制台静默警告）
VTT 文件本身语法容错极低：一个多余空格、一个中文冒号、时间格式少一位毫秒，都会让整条 cue 失效。调试时务必打开浏览器开发者工具的 Console 和 Network 标签页看具体提示。
