track元素不能标记视频片段，仅加载外部WebVTT章节文件；真正定义片段的是VTT中精确到毫秒的时间码与标题，且需满足同源、标准格式等条件。
track元素本身不能标记视频片段，它只负责加载字幕/章节等外部文本轨道
很多人误以为 <track></track> 能像时间轴打点一样“标注某段视频内容”，其实它只是个挂载器：把外部 WebVTT 文件（如 chapters.vtt）按类型（kind="chapters"）关联到 <video></video> 上。真正定义“片段”的是 VTT 文件里的时间码和标题行。
常见错误现象：
– 页面写了 <track kind="chapters" src="data:text/vtt,...>%20%E4%BD%86%E6%B2%A1%E6%98%BE%E7%A4%BA%E7%AB%A0%E8%8A%82%E6%9D%A1
%E2%80%93%20%E7%9B%B4%E6%8E%A5%E5%9C%A8%20<track>%20%E6%A0%87%E7%AD%BE%E9%87%8C%E5%86%99%E6%97%B6%E9%97%B4%E6%88%B3%EF%BC%88%E6%97%A0%E6%95%88%EF%BC%8C%E6%B5%8F%E8%A7%88%E5%99%A8%E4%BC%9A%E5%BF%BD%E7%95%A5%EF%BC%89
- %0A
- %E5%BF%85%E9%A1%BB%E7%94%A8%E5%90%88%E6%B3%95%20WebVTT%20%E6%A0%BC%E5%BC%8F%EF%BC%8C%E9%A6%96%E8%A1%8C%E5%BF%85%E9%A1%BB%E6%98%AF%20
WEBVTT%0A kind%20%E5%BF%85%E9%A1%BB%E8%AE%BE%E4%B8%BA%20" chapters>，设成 <code>"subtitles"或漏写会导致浏览器不渲染章节导航条- VTT 文件需与视频同源，或服务端配好
Access-Control-Allow-Origin，否则控制台报CORS error
WebVTT章节文件怎么写才被浏览器识别为进度打点
浏览器只认标准章节格式：每段以时间范围开头，后跟标题，中间空一行。没有 ID、无 class、不支持嵌套——纯线性时间序列。
WEBVTT 00:00:00.000 --> 00:01:23.456 开场与项目背景 00:01:23.457 --> 00:03:10.888 核心架构设计 00:03:10.889 --> 00:05:44.200 性能压测结果
关键细节：
– 时间码必须精确到毫秒（三位小数），少一位（如 00:01:23.45）会导致整段失效
– 每段之间**必须空一行**，多空或不空都会中断解析
– 标题行不能含 HTML 标签，也不能有冒号开头的元数据（如 NOTE: xxx 会被跳过）
立即学习“前端免费学习笔记（深入）”；
- 时间范围不能重叠，也不能倒置（结束时间 ≤ 开始时间会静默失败）
- 第一段必须从
00:00:00.000开始，否则部分浏览器（如 Safari）不显示章节条 - 标题长度建议 ≤ 50 字符，过长可能被截断且无提示
video 元素如何触发章节跳转并响应用户点击
原生 <video></video> 不提供章节 API，浏览器仅在支持 UI（如 Safari 桌面版、部分 Edge 版本）中自动渲染顶部章节条；Chrome 和 Firefox 当前**完全不渲染章节 UI**，即使 VTT 正确也看不到进度打点。
这意味着：靠 <track kind="chapters"></track> 实现“可点击打点”是不可靠的。真实项目中得自己解析 VTT 并绑定逻辑：
- 用
fetch()加载 VTT，用正则或WebVTTParser（非标准但可用）提取时间点数组 - 监听
timeupdate事件，比对video.currentTime落在哪一段，高亮当前章节 - 给自定义章节列表项绑定
click，调用video.currentTime = targetStart - 注意：Safari 对
currentTime设置有延迟，需监听seeking/seeked确保跳转完成
为什么用 track + chapters 还是推荐？兼容性与语义价值在哪
尽管 UI 支持参差不齐，<track kind="chapters"></track> 仍是唯一被 HTML 标准承认的语义化章节方案。它的价值不在“立刻能用”，而在可访问性（AT 工具可读）、SEO 友好（搜索引擎可索引章节结构）、以及未来浏览器统一支持后的零成本升级。
性能影响极小：VTT 文件通常 findIndex
在每帧timeupdate 中查，改用二分查找或缓存上一段索引。
最容易被忽略的一点：VTT 文件编码必须是 UTF-8 无 BOM，Windows 记事本默认保存带 BOM，会导致 Safari 解析失败且无明确错误提示。
