视频播放中途精准触发答题弹窗，需监听timeupdate事件匹配预设时间戳（±0.5秒误差），暂停播放、显示表单；提交后验证答案并恢复播放，兼顾防抖、状态控制与无障碍体验。
在视频播放中途触发答题弹窗，核心是监听 video 元素的时间点（timeupdate），结合预设的“答题时间戳”，动态插入表单弹窗并暂停播放。关键不在“弹窗样式”，而在“精准触发+状态控制+答案提交后继续播放”。
1. 预设答题时间点与结构准备
把题目和对应时间（单位：秒）提前定义好，例如：
const quizTriggers = [
{ time: 15.2, question: "主角此时拿的是什么？", options: ["钥匙", "手机", "笔记本"], correct: 1 },
{ time: 47.8, question: "这句话出自哪本书？", options: ["《百年孤独》", "《围城》", "《活着》"], correct: 0 }
];
同时准备一个隐藏的弹窗 DOM（不写 inline style，用 class 控制显隐）：
<div id="quiz-modal" class="modal hidden">
<div class="modal-content">
<h3 id="quiz-question"></h3>
<form id="quiz-form">
<label><input type="radio" name="answer" value="0"> 选项一</label>
<label><input type="radio" name="answer" value="1"> 选项二</label>
<button type="submit">确认</button>
</form>
</div>
</div>
2. 监听播放进度并触发弹窗
利用 timeupdate 事件配合防抖逻辑，避免高频触发；用 currentTime 匹配预设时间点（允许 ±0.5 秒误差）：
- 为
<video></video>添加timeupdate监听器 - 每次触发时遍历
quizTriggers，检查是否到达某题时间且尚未展示过 - 匹配成功后：调用
video.pause()、填充题目内容、显示弹窗、记录已触发索引（防止重复）
3. 表单提交后恢复播放
监听弹窗内表单的 submit 事件，做三件事：
- 阻止默认提交（不跳转、不刷新）
- 收集用户选择，可本地验证或发给后端（如
fetch('/api/submit', {method:'POST', body: data})） - 隐藏弹窗、清空表单、调用
video.play()继续播放
注意：若用户未作答就关闭弹窗，需额外处理（如强制暂停 + 提示，或允许跳过但标记“未参与”）。
4. 基础样式与体验优化建议
弹窗本身无需复杂框架，CSS 关键点：
.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); display: flex; justify-content: center; align-items: center; z-index: 1000; }.modal.hidden { display: none; }- 确保弹窗内表单元素可聚焦、支持键盘操作（如空格选中 radio）
- 移动端需适配点击区域、字体大小，避免
input[type=radio]太小难点
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
