HTML5中响应视频时间点逻辑应使用timeupdate事件配合时间点数组匹配或WebVTT字幕轨道的cuechange事件；前者更常用、兼容性好，后者需确保track.mode为showing并监听activeCues。
HTML5视频的cuechange事件本身并不存在，真正用于响应时间点逻辑的是timeupdate事件配合TextTrackCue（尤其是通过video.textTracks管理的VTT字幕轨道），或更直接、更可控的方式是监听timeupdate并手动比对预设时间点。
使用timeupdate监听 + 时间点数组触发业务逻辑
这是最常用、兼容性好、逻辑清晰的做法。原理是：在视频播放过程中持续监听timeupdate，每次触发时检查当前currentTime是否接近你设定的关键时间点（如3.5秒、12秒、47秒），再执行对应操作。
- 给
元素添加timeupdate监听器，注意节流（例如用requestAnimationFrame或简单防抖）避免高频触发 - 预先定义一个时间点配置数组，每个项包含
time（秒）、callback（函数）、可选once（是否只执行一次） - 每次触发时遍历数组，用
Math.abs(video.currentTime - cue.time) 判断是否进入有效窗口（0.1秒容差可覆盖帧率偏差） - 匹配成功后执行
cue.callback()，若once: true则从数组中移除该条目
利用WebVTT字幕轨道 + cuechange事件
如果你已有标准VTT文件且希望复用其时间轴，可通过加载字幕轨道并监听cuechange来触发逻辑。注意：cuechange只在当前激活的TextTrack上触发，且仅当显示/隐藏字幕cue时发生。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 确保
或kind="subtitles"已添加并default或设为mode = "showing" - 获取轨道：
const track = video.textTracks[0]，然后监听track.oncuechange = () => { ... } - 在回调中读取
track.activeCues，它返回当前生效的TextTrackCue列表；每个cue有startTime、endTime、text等属性 - 可根据
cue.startTime查表映射到业务逻辑（例如if (cue.startTime === 8.5) showQuiz()），但注意activeCues可能为空或含多个cue
封装成可复用的时间点控制器
把上述逻辑抽离为一个轻量类，便于多视频复用和维护：
- 构造函数接收
video元素和cues配置（时间点+回调） - 内部自动绑定
timeupdate，启动节流检测循环 - 提供
addCue(time, callback, options)、removeCue(time)、clearAll()等方法 - 支持暂停/恢复监听（如用户拖拽进度条时临时禁用，
seeked后再启用）
注意事项与避坑点
不要依赖seeking或seeked事件来“补触发”漏掉的时间点——它们不保证时机精确，且currentTime可能落在两个cue之间。更稳妥的做法是：在seeked后主动扫描一遍所有待触发时间点，对currentTime ≥ cue.time且未执行过的cue立即触发（需记录已触发状态）。
-
timeupdate频率不固定（通常每200–500ms一次），无法做到毫秒级精准，务必设置合理容差（0.05–0.2秒） - VTT方式需浏览器支持
TextTrackAPI（IE10+，现代浏览器均支持），但kind="metadata"轨道在部分安卓WebView中可能被忽略 - 移动端Safari对
timeupdate在后台播放时可能暂停触发，如有后台逻辑需结合visibilitychange做兜底
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
