track元素不能实现章节跳转，它仅支持时间轴对齐的字幕/描述轨道；真正可行的是用section+id锚点、nav导航及smooth滚动，或JSON数据动态生成目录。

track 元素根本不能实现章节跳转

是 HTML5 为 和 提供的字幕/描述轨道支持元素，它只用于时间轴对齐的文本轨道（如 WebVTT），不提供任何 DOM 导航能力，也不生成可点击的目录项。试图用 实现“章节目录”或“点击跳转到某段”属于典型误用——浏览器不会解析 内容为导航节点，JS 也无法直接监听其“章节点击”事件。

真正能做章节跳转的是

+

+ id 锚点

标准、轻量、无障碍友好的章节跳转方案是语义化结构配合原生锚点链接：

• 每个章节用
  包裹，并设置有意义的 id（如 id="introduction"）
• 目录用
  包裹，内部用 指向对应 id
• 滚动行为可加 scroll-behavior: smooth 到 html 样式中提升体验
• 注意：id 值必须唯一、不能以数字开头、避免空格和特殊字符（推荐只用字母、数字、短横线）

如果非要“自动读取章节信息”，得靠 JS 解析自定义数据

没有浏览器原生支持从 中提取章节并渲染为目录——即使你写了 kind="chapters"，也仅是声明轨道用途，内容仍需是 WebVTT 格式，且仅被视频播放器用于时间轴标记，不暴露给页面 DOM。

可行替代做法：

• 把章节元数据放在 <script type="application/json" id="chapter-data"></script> 中，用 JS 解析后动态生成
• 使用
  手动组织折叠式目录（无需 JS，兼容性好）
• 服务端渲染时直接输出带 id 的
  和对应链接，最稳定

WebVTT 章节文件本身格式类似：

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

WEBVTT

00:00:00.000 --> 00:02:15.000
第一章：引言

00:02:15.000 --> 00:05:30.000
第二章：核心原理

但这段内容不会自动变成页面上的可点击菜单。

常见踩坑：误信“chapters track 能生成目录”

搜索时容易看到过时文档或混淆概念，比如：

• 把 YouTube 或某些播放器 SDK 的私有章节 API 当作 HTML 标准（它们实际是封装了 JS + WebVTT 解析逻辑）
• 给 加 default 属性以为能“默认显示章节列表”——它只影响字幕是否默认开启
• 在非 上使用 ：无效，会被浏览器忽略
• 用 JS 尝试读取 track.track.cues 并遍历生成菜单：可行但复杂，且 cues 加载异步、需监听 load 事件，移动端兼容性差

真要动态驱动章节导航，优先选 JSON 数据源 + 纯 DOM 渲染，别绕路折腾 。WebVTT 章节本质是媒体时间元数据，不是页面导航结构。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！