html的标签kind="chapters"必须使用严格格式的webvtt文件：首行webvtt、每段以chapter开头、时间戳为hh:mm:ss.mmm --> hh:mm:ss.mmm、纯文本章节名、utf-8无bom编码；仅safari原生支持ui渲染，chrome/edge部分支持但需服务端支持byte-range请求，移动端基本不可用。
chapters kind 的 track 必须用 WebVTT 格式，且只支持章节元数据
HTML <track></track> 的 kind="chapters" 不是随便写个字幕文件就能用的——它只接受 WebVTT 格式中带 CHAPTER 类型的文件，且内容必须是章节标题 + 时间戳，不能含普通字幕文本。浏览器靠这个生成视频底部的章节导航条（如 Chrome、Edge 的进度条上方小标签），但不渲染任何文字到画面上。
常见错误：把普通 .vtt 字幕文件直接设为 kind="chapters"，结果章节导航不出现，控制台也没报错，只是静默失效。
-
kind="chapters"的<track></track>必须指向一个合法 WebVTT 文件，开头必须是WEBVTT，且每段 cue 前需加CHAPTER标识（不是STYLE或空行） - cue 时间格式必须是
HH:MM:SS.mmm，起止时间都要写，例如00:00:00.000 --> 00:01:23.456 - cue 内容只能是纯文本章节名，不能有 HTML、换行或空格开头/结尾（否则解析失败，章节消失）
WebVTT 章节文件怎么写才被识别
下面是一个能被正确解析并显示章节导航的最小可用示例：
WEBVTT CHAPTER 00:00:00.000 --> 00:02:15.000 简介 CHAPTER 00:02:15.000 --> 00:05:30.000 安装依赖 CHAPTER 00:05:30.000 --> 00:08:45.000 配置环境变量
注意三点：第一行必须是 WEBVTT（单独一行，后面空行）；每段 cue 前必须写 CHAPTER；章节名不能带冒号、括号等特殊符号（部分浏览器会截断或忽略）。
- 文件编码必须是 UTF-8 无 BOM，否则中文章节名显示为乱码或整个 track 失效
- 时间区间不能重叠，也不能倒序，否则后续章节可能被跳过
- 如果视频时长 10 分钟，最后一段结束时间建议写成
00:10:00.000而不是00:10:00.000 --> 00:10:00.000（后者会被视为零时长，不显示）
video 元素里怎么挂载 chapters track
直接在 <video></video> 内部添加 <track></track> 标签即可，不需要 JS 操作，但必须满足加载顺序和属性要求：
<video controls><source src="demo.mp4" type="video/mp4"><track kind="chapters" src="chapters.vtt" srclang="zh" label="章节"></track></source></video>
-
srclang属性必须设置（哪怕只是占位），否则某些浏览器（如 Safari）不触发章节解析 -
label是用户在右键「字幕」菜单里看到的名称，建议用中文但避免空格或符号 -
src路径必须可跨域访问（若视频和 vtt 在不同域名，需服务端配Access-Control-Allow-Origin） - 不要加
default属性——kind="chapters"不支持默认启用，它始终自动激活
为什么 Chrome 显示了章节但点击没反应
章节导航条显示出来，但点击某章不跳转，大概率是视频未启用 seeking 支持或时间戳精度不足。
- 确保视频已完整加载或至少完成 metadata 加载（
loadedmetadata事件触发后才可靠） - 检查视频服务器是否支持 byte-range 请求（否则拖动/跳转失败，章节点击也无效）
- WebVTT 中的时间戳必须精确到毫秒，且与视频实际关键帧对齐——如果章节时间落在 I 帧之间，有些浏览器会卡住或跳到最近 I 帧（导致偏移）
- 移动端 Safari 对
chapters支持极弱，基本不显示导航条，别指望 iOS 用户看到它
真正麻烦的是时间戳校准：用 FFmpeg 查关键帧位置比肉眼估更靠谱，不然用户点“第三章”跳到第二章末尾，就不是前端能解决的问题了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
