HTML网页中track标签的cuechange事件如何用JS捕获并触发操作-html教程-PHP中文网

cuechange 事件只能绑定在 texttrack 对象且 mode 为 "showing" 或 "hidden" 时生效；常见失效原因包括 track.mode 未设置、vtt 文件加载失败、texttracks 未就绪或监听过早；正确步骤是等待 loadeddata 后获取 track、设 mode="showing" 再绑定 oncuechange。

html网页中track标签的cuechange事件如何用js捕获并触发操作

cuechange 事件本身不能直接绑定在 <track></track> 元素上触发——它只在 TextTrack 对象上有效，且必须满足 mode 为 "showing" 或 "hidden"（不能是 "disabled"），否则监听无效。

dmap-jsapi-skill

DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。

下载

`track.oncuechange` 不生效的常见原因

<track></track> 标签没加 default 属性，或 JS 中没手动设 track.mode = "showing"
WebVTT 文件路径 404 或 MIME 类型不是 text/vtt（服务器需配置）
字幕轨道未被浏览器识别：检查 video.textTracks.length 是否 ≥ 1，且 track.kind === "subtitles" 或 "metadata"
oncuechange 绑定太早，textTracks 还没加载完成（需等 loadeddata 或 canplay 后再取 track）

正确获取并监听 `cuechange` 的步骤

确保 HTML 中 <track></track> 已声明，例如：<track kind="subtitles" src="captions.vtt" srclang="zh" label="中文" default></track>
等待视频元数据加载完成：video.addEventListener("loadeddata", () => { ... })
取出第一个有效轨道：const track = video.textTracks[0]
设置显示模式：track.mode = "showing"（这是触发 cuechange 的硬性前提）
绑定监听：track.oncuechange = () => { console.log(track.activeCues); }
注意：activeCues 是实时数组，可能为空（比如 cue 刚结束）、含多个项（重叠时间点），不要直接假设 activeCues[0] 总存在

`activeCues` 中的时间判断要小心

cue.startTime 和 cue.endTime 是秒级浮点数（如 8.5），不是字符串或 HH:MM:SS 格式
不要用 === 精确比对时间值（浮点误差 + 渲染延迟），建议用区间判断：if (currentTime >= cue.startTime && currentTime
若想只在 cue 刚激活时执行一次逻辑（比如弹题），需自行记录已处理的 cue ID 或用 Map 缓存状态，因为 cuechange 在激活/失活时都会触发

真正容易被忽略的是：cuechange 不代表“到了某个时间点”，它只反映字幕 cue 的显隐状态切换。如果你只是想在视频播到 12.3 秒时弹窗，用 timeupdate + 时间数组更稳；只有当你已有 VTT 文件、且业务逻辑与字幕内容强耦合（比如每条字幕对应一个知识点卡片），才值得走 cuechange 这条路。