track元素不支持视频打点功能，仅用于挂载字幕等文本轨道；打点需用JavaScript监听timeupdate事件，结合自定义时间数据实现跳转与交互。
track 元素本身不支持视频打点
直接用 <track></track> 标签无法实现“点击时间点跳转”或“自动触发事件”这类打点功能。它只是用来挂载外部文本轨道（如字幕、章节、描述），浏览器只负责渲染或暴露给辅助技术，不提供时间戳监听或交互钩子。
真正的打点得靠 JavaScript 监听 timeupdate + 自定义数据
你需要把“打点信息”存在 JS 变量或 DOM 属性里，再结合 video.currentTime 和 timeupdate 事件做匹配。常见做法是：
- 用
data-points属性或单独的 JSON 数组存打点时间（单位：秒）和对应内容，例如[{"time": 12.5, "label": "关键操作开始"}, {"time": 47.2, "label": "错误弹窗出现"}] - 在
timeupdate回调中遍历打点数组，检查当前时间是否落在某个打点附近（加 ±0.3 秒容差，避免因帧率/精度漏判） - 命中后触发自定义逻辑：高亮 UI、发埋点、显示 tooltip、暂停视频等
- 注意节流 ——
timeupdate触发频繁，建议用requestAnimationFrame或简单的时间间隔判断（比如每 100ms 检一次），别直接在事件里跑全量遍历
track 的唯一相关用途：用 chapters 类型展示可点击章节
如果你只是想让用户能点击章节跳转，<track kind="chapters"></track> 是合法且被部分浏览器支持的方式，但限制极多：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 必须是 WebVTT 格式，且第一行写
WEBVTT，之后用00:00:12.500 --> 00:00:18.200定义时间段，下方写章节标题 - Chrome 和 Safari 支持渲染章节轨道为进度条上方的标记（需启用开发者工具中的 “Show controls list” 才可见），但不提供 JS API 读取或绑定点击
- Firefox 不渲染章节轨道；Edge 行为不稳定
- 你无法通过
track.track.cues获取章节 cue 并添加 click 事件 —— 浏览器禁止对kind="chapters"的 cue 添加监听
推荐组合：track（仅字幕） + 自定义打点层（绝对定位覆盖）
实际项目中更可控的做法是放弃用 track 承担打点逻辑，而是：
立即学习“前端免费学习笔记（深入）”；
- 保留
<track kind="subtitles"></track>做纯字幕，确保可访问性 - 在 video 外层加一个
<div class="video-overlay">，用 CSS 绝对定位盖在视频上 <li>JS 动态生成打点按钮（<code><button data-time="12.5">▶ 关键操作</button>），位置按比例映射到进度条宽度 - 点击按钮执行
video.currentTime = parseFloat(btn.dataset.time)，并可同步滚动到对应字幕行（如果字幕已解析成数组） - 这样既兼容所有浏览器，又能自由控制样式、事件、动画和埋点上报时机
真正难的不是放个 <track></track>，而是把时间语义（谁在什么时刻做了什么）和交互意图（用户想跳、想查、想分享）对齐 —— 这部分没标准 API，得自己建模。
