元素不能用作导读索引,因其仅提供时间轴对齐的文本轨道(如字幕、章节标记),不生成可点击DOM节点,也不支持跳转;实现可视可点的导读索引应使用+或等语义化链接方案。

track 元素根本不能用来做导读索引
直接说结论: 是为媒体元素(、)提供**时间轴对齐的文本轨道**用的,比如字幕、章节描述、描述性音频。它不支持跳转、不渲染为可点击链接、浏览器也不会把它当导航结构处理——所以拿它做“导读索引”属于误用,页面里加了也完全没反应。
导读索引该用什么替代
真正适合做文档/视频章节导航的是语义化 HTML 结构 + 原生链接能力:
-
包裹一组链接,指向页面内带id="section1"的标题或区块 - 视频章节可用
+列出时间节点,每个用href="#t=120"(跳转到 120 秒)触发播放器定位 - 如果需要自动生成目录,JavaScript 可扫描
h2、h3标题并插入锚点,但底层仍是+id
为什么有人会想到用 track?常见混淆点
因为 的 kind="chapters" 确实能加载章节文件(如 WebVTT 格式),但它的作用仅限于:让播放器在进度条上显示章节标记、供辅助技术读出章节名——它本身不生成 DOM 节点,也不响应点击。你写:
<video><track kind="chapters" src="chapters.vtt"></track></video>
这段代码不会在页面上出现任何文字或按钮;用户看不到“第一章”“第二章”,更没法点击跳转。想实现可视可点的索引,必须自己写 HTML。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面,使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力: - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面; - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”; - 提及位于 `apps/console/src/featur
如果非要结合 track 做章节导航,怎么桥接
可以读取 的内容,用 JS 解析 WebVTT 文件里的时间戳和标题,再动态生成侧边栏导航。但这不是 自身功能,而是额外开发:
- 监听
load事件后调用track.track.cues获取所有章节 cue - 遍历
cues,提取cue.text和cue.startTime - 为每个 cue 创建
元素并插入 DOM - 注意:WebVTT 解析需处理换行、HTML 实体,且
cues在某些浏览器中延迟可用
这种做法绕过了原生章节 UI,但代价是失去无障碍支持(除非手动补 aria-* 属性),也增加了维护成本。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










