cuechange事件由媒体元素（如）触发，需监听该元素并检查texttracks[i].activecues获取当前字幕；track须设mode="showing"、readystate≥2且kind为subtitles或captions。

在 HTML5 中，`` 元素本身不直接触发 `cuechange` 事件，该事件实际由关联的 `

确保 track 元素正确配置并启用

必须满足以下条件，`cuechange` 才会正常触发：

• `` 标签需有 `kind="subtitles"`（或 `"captions"`）且 `src` 指向有效的 `.vtt` 文件
• `` 必须已加载完成（`readyState ≥ 2`），且 `mode` 设为 `"showing"`（而非 `"disabled"` 或 `"hidden"`）
• 媒体元素（如 `

监听 cuechange 事件并读取当前字幕

在 JavaScript 中，为 `

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

const video = document.querySelector('video');
const track = video.textTracks[0]; // 假设第一个 track 是字幕轨

// 确保 track mode 为 showing
if (track) track.mode = 'showing';

video.addEventListener('cuechange', () => {
  if (!track || !track.activeCues || track.activeCues.length === 0) return;

  const currentCue = track.activeCues[0];
  console.log('当前字幕文本：', currentCue.text);
  console.log('起始时间：', currentCue.startTime);
  console.log('结束时间：', currentCue.endTime);
});

注意多 cue 同时激活的情况

WebVTT 支持同一时刻多个 cue 激活（例如分屏字幕、双语字幕）。`activeCues` 是一个 `TextTrackCueList`（类数组），可用 `for...of` 遍历：

video.addEventListener('cuechange', () => {
  for (const cue of track.activeCues) {
    console.log('激活字幕：', cue.text);
  }
});

处理 track 加载延迟与 readyState

若页面加载快于 track 加载，`activeCues` 可能为空或 `undefined`。建议加状态检查：

function onCueChange() {
  if (track.readyState  {
  video.addEventListener('cuechange', onCueChange);
});

不复杂但容易忽略的是：cuechange 不是每个 track 单独触发的事件，而是整个 media 元素在内部 cue 状态变化时统一派发的——所以必须从 `video` 上监听，再手动查对应 track 的 `activeCues`。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南