HTML中track字幕kind为chapters时怎么配合JS做视频分段-html教程-PHP中文网

chapters字幕轨无法通过cuechange事件监听，必须用timeupdate手动比对时间或读取track.cues；需在mode为hidden/disabled时访问cues，跳转前保存mode、跳转后恢复并手动匹配，vtt时间建议用整数秒。

html中track字幕kind为chapters时怎么配合js做视频分段

chapters字幕轨不能用`cuechange`事件监听

浏览器对 kind="chapters" 的处理和其他 kind（如 subtitles）完全不同：它不触发 textTrack.cuechange，也不把章节作为 TextTrackCue 对象暴露给 JS。这是最常踩的坑——你绑了事件却收不到任何回调，不是代码写错，是规范如此。

真正可用的方式只有两种：监听 timeupdate 手动比对当前时间点，或直接读取 track.trackKind 对应的 track.cues（注意：部分浏览器中 chapters 轨的 cues 可能为空或延迟就绪）。

chapters 轨本质是导航用的，浏览器 UI（如 Chrome 地址栏时间轴缩略图）会自动消费它，但 JS 层面不提供“章节切换”事件
必须在 track.mode = "hidden" 或 "disabled" 下才能安全读取 track.cues；设为 "showing" 后，某些浏览器（如 Safari）会清空 cues 列表
章节 cue 的 text 是纯文本，不支持 HTML；id 字段通常为空，不能依赖它做映射

手动匹配当前时间点找章节标题

核心逻辑是：在 video.addEventListener("timeupdate", ...) 中遍历 track.cues，找出 startTime ≤ currentTime 的那个 cue。

注意 track.cues 是只读的 TextTrackCueList，不能用数组方法直接遍历，得转成数组或用 for 循环索引访问：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

video.addEventListener("timeupdate", () => {
  const track = video.textTracks[0]; // 假设 chapters 在第一个轨
  if (!track || track.kind !== "chapters") return;

  const time = video.currentTime;
  let activeChapter = null;
  for (let i = 0; i = cue.startTime && time

务必加 track.kind === "chapters" 判断，避免误操作其他轨
不要用 Array.from(track.cues) —— 某些旧版 Edge 会报错；稳妥做法是 for 循环或 track.cues[i]
章节 cue 的 endTime 可能为 Infinity（比如最后一章），需单独处理边界

确保 track.cues 就绪后再读取

track.cues 不是立即可用的：VTT 文件加载、解析、绑定到 track 都有延迟。常见错误是 DOM 加载完就立刻读 cues.length，结果为 0。

可靠方式是监听 load 事件 + oncuechange（虽然对 chapters 无效，但它表示 track 已就绪）+ 轮询兜底：

const track = video.textTracks[0];
if (track.readyState === TextTrack.LOADED) {
  readChapters(track);
} else {
  track.addEventListener("load", () => readChapters(track));
  // 兜底：1s 后再试一次（防 load 未触发）
  setTimeout(() => readChapters(track), 1000);
}