核心是建立主动管理时间点的响应机制，通过timeupdate事件配合动态更新nextTriggerTime变量（如20秒），并用容差判断（current >= next-0.1）精准触发交互，避免重复或遗漏。
要在 HTML5 视频中根据播放进度触发交互逻辑，核心不是“到了某个时间点就执行”，而是建立一套可预测、可维护、防误触的时间响应机制。关键在于主动管理时间点，而不是被动比对。
用 timeupdate + 动态目标时间精准控制
监听 timeupdate 是基础，但必须配合动态更新的下一个触发时间，否则容易卡在某一点反复触发或彻底跳过后续节点。
- 定义一个变量
nextTriggerTime = 20，代表下一次提问/弹窗/跳转的目标时刻 - 在
timeupdate中持续检查：if (video.currentTime >= nextTriggerTime - 0.1 && video.currentTime （留出 0.1 秒容差，适配帧率偏差） - 命中后立即暂停、显示交互组件，并将
nextTriggerTime更新为video.currentTime + 20 - 用户确认后调用
video.play()，视频从当前时间继续播放，逻辑自动延续
预设关键时间点，支持不同动作类型
如果交互不规律（比如第 8 秒弹题、第 32 秒跳转章节、第 67 秒显示字幕注释），更适合用结构化配置代替硬编码。
- 准备一个数组：
const cues = [{ time: 8, type: 'quiz' }, { time: 32, type: 'jump', target: '#chapter2' }, { time: 67, type: 'note', content: '注意这里的关键参数' }] - 每次
timeupdate触发时遍历数组，用Math.abs(video.currentTime - cue.time) 判断是否命中 - 命中后执行对应逻辑（弹窗、scrollIntoView、插入 DOM 元素等），并可选标记
once: true防止重复触发 - 建议加节流，例如用
requestAnimationFrame包裹判断逻辑，避免每帧都做计算
结合 WebVTT 字幕轨道做语义化触发
如果你已有 VTT 文件，且时间轴与业务逻辑强绑定（如教学视频中每个知识点自带字幕 cue），可复用浏览器原生机制。
立即学习“前端免费学习笔记（深入）”；
- 在
<video></video>内添加：<track kind="metadata" src="logic.vtt" label="Logic Cues"></track> - 确保 track.mode = 'hidden' 或 'showing'（
metadata类型通常设为 hidden） - 监听
textTracks[0].oncuechange，从中读取activeCues - 每个 activeCue 的
startTime可映射到具体操作，例如：if (cue.startTime === 14.5) showHint(cue.text) - 优势是时间轴由外部文件维护，便于编辑和多语言切换；缺点是依赖 VTT 格式规范，调试不如 JS 数组直观
处理拖拽、暂停、结束等干扰场景
真实用户会拖进度条、切后台、锁屏、甚至刷新页面——这些都会让时间逻辑错乱，需针对性防护。
- 监听
seeking事件，在拖拽开始时临时禁用时间判断；seeked后重新校准nextTriggerTime或重置 cue 匹配索引 - 监听
pause和play，暂停时不推进逻辑，恢复播放后继续检测 - 监听
ended，播放完毕后清空所有待触发状态，避免下次加载时残留 - 页面卸载前（
beforeunload）保存当前进度和下一个触发时间，下次加载时恢复上下文
