HTML中track元素怎么与播放进度绑定-html教程-PHP中文网

元素不自动绑定播放进度，浏览器通过timeupdate事件和内置逻辑自动渲染字幕；需确保VTT格式合法、track.mode设为"showing"，自定义联动应使用TextTrackCue API监听oncuechange。

html中track元素怎么与播放进度绑定

track元素本身不绑定播放进度

是纯元数据容器，浏览器不会自动把它和 currentTime 关联起来。它只提供字幕、章节或描述文本的时间段（startTime / endTime），真正触发显示/隐藏靠的是的 timeupdate 事件和内置的轨道渲染逻辑。

浏览器自动处理字幕显示时机

只要的 kind 是 "subtitles" 或 "captions"，且 srclang 和 label 合理，启用后浏览器会监听视频播放器内部时间戳，在 currentTime 落入某条子元素（中的 cue）的 startTime–endTime 区间时，自动渲染对应文本。

你不需要手动监听 timeupdate 去“绑定”，也不该用 JS 模拟这个逻辑——这会绕过原生字幕定位、暂停恢复、多轨道切换等行为，还可能破坏可访问性（如屏幕阅读器对的语义识别）。

确保的 src 指向合法 WebVTT 文件（以 WEBVTT 开头，cue 时间格式为 00:00:01.000 --> 00:00:03.500）
不要在 JS 中用 video.currentTime = x 后立刻查 track.mode 是否生效——原生渲染有微小延迟，且依赖 cue 的 active state 切换
若字幕没出现，优先检查控制台是否报 Failed to load resource（src 路径错）、Invalid VTT file（格式非法）或 track.mode === "disabled"（未设为 "showing"）

需要自定义进度联动时，改用 TextTrackCue API

如果你要实现高亮当前行、同步外部 UI 进度条、或做逐帧字幕动画，得放弃“绑定”思维，转而监听 texttrack.cues 的变化：

video.textTracks[0].onaddcue = (e) => {
  // 新 cue 加入时可做预处理
};
video.textTracks[0].oncuechange = () => {
  const activeCues = video.textTracks[0].activeCues;
  if (activeCues.length > 0) {
    console.log("当前活跃字幕：", activeCues[0].text);
  }
};

注意：activeCues 是实时反映当前 currentTime 所处时间段的 cue 列表，不是所有 cue；它由浏览器维护，比手动比对 currentTime 和每个 cue 的时间范围更可靠、性能更好。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

oncuechange 触发频率取决于视频帧率，不是每毫秒一次，别在里面写重逻辑
VTT 文件里同一时刻多个 cue 会同时出现在 activeCues 中，需按顺序或 line 属性处理排版
若用 video.currentTime 跳转后 activeCues 为空，大概率是跳转位置没覆盖任何 cue 的时间区间，或 VTT 时间戳精度不够（如只有秒级）

常见错误：用 JS 模拟 cue 时间判断

有人写这样的代码：

video.addEventListener("timeupdate", () => {
  const t = video.currentTime;
  for (const cue of track.cues) {
    if (t >= cue.startTime && t 
<p>这看起来“绑定”了，但问题很多：</p>