track标签不支持点击跳转，章节导航必须用javascript读取kind="chapters"的cue数据并动态生成ui；vtt需严格格式，cue须在track.mode="showing"且video.readystate≥2后读取；兼容性差，应冗余备份章节数据。
track 标签本身不支持点击跳转，章节导航需配合 JavaScript 实现
<track></track> 只是为视频提供字幕、章节等元数据的容器，浏览器不会自动把它渲染成可点击的导航栏。所谓“章节导航点”，实际是读取 <track kind="chapters"></track> 中的 cue（时间点+标题），再用 JS 动态生成按钮或列表，并绑定 video.currentTime 跳转逻辑。
常见错误是直接写 <track kind="chapters" src="chapters.vtt"></track> 就以为能点选章节——结果页面毫无反应，控制台也没报错，纯属功能没实现。
- 必须用
kind="chapters"，其他类型（如subtitles）无法被解析为章节结构 - VTT 文件需严格符合章节格式：每段以
00:01:23.456 --> 00:02:34.789开头，后跟标题行（不能空行，不能含 HTML） - Chrome 和 Edge 支持原生章节显示（在视频右键菜单里能看到 “Chapters”），但 Safari 不显示，Firefox 完全不解析
chapterstrack —— 所以不能依赖浏览器默认行为
解析 VTT 章节 cue 的关键：监听 video.readyState 和 track.mode
章节数据不是加载完就立刻可用。VTT 文件异步加载，cue 需等 video.readyState >= 2 且 track.mode === "showing" 后才能安全读取 track.cues。
容易踩的坑是过早遍历 track.cues，结果拿到空列表或 undefined —— 因为 cue 对象只在 track 激活后才注入。
- 推荐在
video.onloadeddata或track.onload后检查track.cues.length - 不要用
track.addEventListener("load", ...)，部分浏览器不触发；改用轮询track.cues.length > 0或监听video.oncanplay - cue 的
startTime/endTime是秒数（浮点），不是字符串，可直接赋给video.currentTime
生成导航 UI 时，避免重复绑定 click 事件
每次重新加载视频或切换 track 时，如果无清理机制，会不断叠加事件监听器，导致同一点击触发多次跳转。
实操建议用唯一标识符管理按钮和 cue 的映射关系，而不是靠 DOM 顺序硬匹配。
- 生成按钮时，把
cue.startTime存为data-start属性：<button data-start="83.45">第一章</button> - 统一用事件委托绑定到父容器，避免逐个
addEventListener - 若支持多 track 切换，先调用
oldTrack.mode = "disabled"再初始化新 track，防止旧 cue 干扰
兼容性差是最大现实约束，fallback 方案不能省
Safari 对 kind="chapters" 的 cues 属性返回空，Firefox 直接不解析章节 VTT —— 这意味着仅靠 <track></track> + JS 的方案在近半数桌面端不可用。
真正能落地的做法是：把章节信息冗余存一份在 JSON 或内联 script 中，当 track.cues.length === 0 时降级使用该备份。
别指望一个 VTT 文件通吃所有浏览器；也别在 console.log(track.cues) 看到 undefined 就怀疑代码写错——大概率是浏览器根本没解析它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
