cuechange事件由媒体元素（如<video>）触发，需监听该元素并检查textTracks[i].activeCues获取当前字幕；track须设mode="showing"、readyState≥2且kind为subtitles或captions。
在 HTML5 中，`
确保 track 元素正确配置并启用
必须满足以下条件，`cuechange` 才会正常触发：
- `
- `
- 媒体元素（如 `
监听 cuechange 事件并读取当前字幕
在 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` 遍历：
立即学习“Java免费学习笔记（深入）”；
video.addEventListener('cuechange', () => {
for (const cue of track.activeCues) {
console.log('激活字幕：', cue.text);
}
});
处理 track 加载延迟与 readyState
若页面加载快于 track 加载，`activeCues` 可能为空或 `undefined`。建议加状态检查：
function onCueChange() {
if (track.readyState < TextTrack.LOADED) return;
if (!track.activeCues || track.activeCues.length === 0) return;
const cue = track.activeCues[0];
// 处理字幕逻辑
}
track.addEventListener('load', () => {
video.addEventListener('cuechange', onCueChange);
});
不复杂但容易忽略的是：cuechange 不是每个 track 单独触发的事件，而是整个 media 元素在内部 cue 状态变化时统一派发的——所以必须从 `video` 上监听，再手动查对应 track 的 `activeCues`。
