HTML5视频实时叠加覆盖物的关键是时空对齐：外层relative容器并列video与absolute定位overlay，用timeupdate事件驱动时间同步，结合百分比坐标实现响应式位置对齐。
在 HTML5 视频播放中实时叠加覆盖物（如文字、图标、热区、进度标记等），关键在于将图层精准同步到视频画面坐标系，并随播放时间动态更新。核心不是“遮罩”，而是“时空对齐”——既要位置对齐（响应式适配），也要时间对齐（帧级精度不依赖 requestAnimationFrame 驱动）。
用绝对定位容器包裹 video 和 overlay
不要把 overlay 写在 <video> 内部（无效），也不要用 z-index 混乱堆叠。标准做法是用一个相对定位的外层容器，让 video 和 overlay 并列子元素：
- 外层
<div class="video-container" style="position: relative;"> -
<video>设为width: 100%; height: auto;，保持原始宽高比 - overlay 元素（如
<div class="overlay">）设position: absolute; top: 0; left: 0; width: 100%; height: 100%;，与 video 视觉重叠 - 确保 overlay 内部元素使用百分比或 JS 动态计算坐标，避免固定像素值导致缩放错位
监听 timeupdate 实现时间驱动更新
video 的 timeupdate 事件是官方推荐的时机信号（约每 200ms 触发一次，足够多数覆盖物需求），比 requestAnimationFrame 更可靠且省资源：
- 绑定
video.addEventListener('timeupdate', handleOverlay) - 在
handleOverlay中读取video.currentTime，查表或计算当前应显示哪些覆盖物 - 例如：某弹幕在 12.3s 出现 → 当
currentTime >= 12.3 && currentTime 时渲染该 DOM 节点 - 避免高频 DOM 操作：用 documentFragment 批量更新，或仅 toggle class 控制显隐
坐标映射：把视频内逻辑位置转为屏幕像素
覆盖物需贴合视频内容（比如标注人脸位置），就必须将视频帧内的归一化坐标（0–1）转为 overlay 容器内的实际像素：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 获取 video 原始尺寸：
video.videoWidth/video.videoHeight - 获取容器实际渲染尺寸：
container.clientWidth/container.clientHeight - 计算缩放比例：
scaleX = container.clientWidth / video.videoWidth，scaleY同理（注意是否等比缩放） - 若已知某目标在帧内坐标 (x=0.3, y=0.6)，则 overlay 中 left = 0.3 × video.videoWidth × scaleX，top = 0.6 × video.videoHeight × scaleY
- 响应式场景下，resize 时重新计算 scale 并重置 overlay 位置
性能与兼容性要点
覆盖物频繁更新易引发卡顿或闪烁，需针对性优化：
- 优先用 CSS transform + opacity 控制移动/显隐（触发 GPU 加速），避免修改 top/left
- 复杂图形（如路径、SVG 图标）建议预渲染为 canvas 或 sprite 图片，减少重绘压力
- 移动端需监听
webkitbeginfullscreen等事件，在全屏时调整 overlay 布局逻辑 - IE11 不支持
timeupdate高频触发，可降级为setInterval+currentTime轮询（间隔 ≥ 33ms）
不复杂但容易忽略：覆盖物的生命周期必须和视频状态绑定——暂停时停止更新，seek 时重置状态，销毁时清理事件监听和定时器。真正稳定的实现，90% 在边界处理，不在主逻辑。
