HTML实现课程视频章节标记主要依赖于<track>标签配合<video>元素，通过定义时间点和章节标题来实现。以下是具体实现方法和代码示例：1.基本结构使用<video>标签嵌入视频，并通过<track>标签添加章节信息。<videocontrolswidth="600"><sourcesrc="course-video.mp4"

正确结构示例：

• kind="chapters" 是唯一合法值，写成 "chapter" 或 "cues" 会失效
• src 必须是同源或配好 CORS 的 .vtt 文件，不能是本地 file:// 路径（开发时用 python -m http.server 启服务）
• 多个 可共存，但只有 kind="chapters" 的那条会被用于时间轴跳转

章节 VTT 文件格式不能有语法错误，时间戳必须严格对齐视频实际时间点

浏览器对章节 VTT 解析极脆弱：空行、多余空格、时间格式少一个毫秒位（如 00:01:23.0 写成 00:01:23），都会导致整条轨道被丢弃，且不报错。

标准 VTT 章节文件开头必须带 WEBVTT 声明，每段以时间范围起始：

WEBVTT
00:00:00.000 --> 00:02:15.000
第一章：课程导学
00:02:15.000 --> 00:08:33.500
第二章：HTML 基础结构

• 时间戳必须用 HH:MM:SS.mmm 格式，毫秒位固定三位，不能省略
• 章节标题不能含 HTML 标签，否则显示为纯文本（如 重点 会原样输出）
• 视频总时长必须 ≥ 最后一个时间戳的结束点，否则拖到末尾可能卡住或跳回开头

Chrome 和 Safari 对章节轨道的支持差异直接影响用户能否看到跳转菜单

Chrome 从 v70 起支持 并自动在时间轴上渲染章节标记（鼠标悬停显示标题），但 Safari 直到 iOS 16.4 / macOS Ventura 13.3 才完整支持——旧版 Safari 只解析 VTT，不提供 UI 交互。

• Firefox 完全不渲染章节 UI， 加载成功但用户无感知
• 没有 polyfill 能补全原生章节菜单，JS 模拟需重写整个进度条逻辑，成本高
• 如果课程平台要兼容 Firefox 或老 Safari，得额外用 JS 读取 VTT 内容 + 动态生成章节按钮列表

用 JavaScript 读取章节信息需要手动解析 VTT，不能依赖 video.textTracks 的实时状态

video.textTracks 只暴露轨道元数据（如 kind、label），不提供章节内容。想实现「点击章节跳转」或「当前章节高亮」，必须自己 fetch VTT 文件并解析文本。

关键点：

• VTT 时间戳需转成秒数："00:05:22.340" → 5 * 60 + 22 + 0.340
• 用 video.currentTime 实时比对当前播放位置落在哪个区间内
• 注意 VTT 行末可能带 \r\n 或 \n，正则匹配前先 .trim()
• 不要在 timeupdate 事件里反复解析整个 VTT，应提前 parse 一次缓存成数组

事情说清了就结束。

本篇关于《HTML实现课程视频章节标记主要依赖于标签配合