不能直接用实现章节导航，需手动设track.mode="showing"、确保WebVTT格式正确（首行WEBVTT+CHAPTER标记+严格时间轴）、解析内容并绑定timeupdate事件或借助video.js等播放器。
video 元素里加 track 标签就能做章节导航？不一定
直接在 里塞一个 ，浏览器不会自动弹出章节列表——它只提供底层支持，具体展示逻辑得你自己写或依赖播放器（比如 video.js）。原生 对 kind="chapters" 的 UI 支持几乎为零，Chrome、Firefox 都不渲染章节控件，Safari 也仅限于某些系统级播放器调用。
常见错误现象：
– 页面上看不到任何章节按钮或列表
– track 加载成功（onload 触发），但 video.textTracks 里 mode 是 "disabled"
– 点击时间轴跳转后，章节高亮不更新
- 必须手动设
track.mode = "showing"才能激活轨道（否则默认是"disabled"） -
kind="chapters"的src必须指向有效的 WebVTT 文件，且第一行必须是WEBVTT - WebVTT 中的章节条目必须用
CHAPTER标记（不是NOTE或普通字幕块），格式如：CHAPTER01\n00:00:00.000 --> 00:01:23.456\n第一章：安装环境
- 原生 API 不提供章节元数据读取方法，需解析 WebVTT 内容或提前维护映射表
WebVTT 章节文件怎么写才被识别为 chapters 轨道
WebVTT 不是“有时间轴+文字”就行。浏览器只把明确标记为 CHAPTER 类型的块当作章节入口，其他都当普通字幕忽略。很多开发者用 SRT 转 WebVTT 后没改类型，结果 kind="chapters" 形同虚设。
- 文件开头必须是纯文本
WEBVTT（不能带 BOM，不能有空行） - 每个章节块以
CHAPTERxx开头（如CHAPTER01），后面紧跟时间轴和标题 - 时间轴格式严格：
HH:MM:SS.mmm --> HH:MM:SS.mmm，毫秒必须三位 - 标题行不能含 HTML 标签，否则解析失败；可含 Unicode，但避免控制字符
- 示例有效片段：
WEBVTT\n\nCHAPTER01\n00:00:00.000 --> 00:02:15.000\n快速入门\n\nCHAPTER02\n00:02:15.001 --> 00:05:30.000\n核心配置
怎么用 JavaScript 读取并跳转到指定章节
原生 HTMLTrackElement 没有 getChapters() 这类方法，你得自己解析 WebVTT 内容或监听 timeupdate 做匹配。最轻量的做法是预加载章节数据，不依赖实时解析。
- 在加载
track后，用fetch(track.src)获取内容，用正则提取CHAPTERxx块（注意跨域限制） - 存成数组，每项含
{id, start, end, label}，例如：[{id:"CHAPTER01", start:0, end:135, label:"快速入门"}] - 监听
video.ontimeupdate，遍历数组找当前时间落在哪个区间，更新 UI 高亮 - 跳转时别直接设
video.currentTime = target.start，先检查video.readyState >= 2，否则可能无效 - 触发跳转后，建议加
video.play().catch(e => console.warn("auto-play blocked"))，应对静音自动播放策略
video.js 里用 chapters 轨道要注意什么
video.js 会自动读取 并生成章节菜单，但它对 WebVTT 格式更敏感——比如要求 srclang 属性存在，否则可能跳过该轨道。
-
标签必须带srclang="zh"（或其他合法语言码），即使内容无语言属性 - video.js 默认只显示第一个
chapters轨道，多个时需用player.textTracks().tracks_[i].mode = "showing"手动切换 - 章节菜单点击后不会自动播放，需监听
player.on("chapterclick", handler)并手动player.currentTime(...) - 如果章节标题过长，video.js 默认截断，要改样式得覆盖
.vjs-chapters-button .vjs-menu-item span - 移动端下，章节菜单可能被折叠进更多菜单，需确认
controlBar.chaptersButton是否启用
WebVTT 章节不是“加了就可用”的功能，它依赖格式精度、加载时机和主动的 JS 协作。最容易被忽略的是：原生浏览器根本不渲染章节 UI，所有交互逻辑都得自己补全——哪怕只是加个下拉菜单和时间跳转，也绕不开手动解析与状态同步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
