requestvideoframecallback 是视频帧分析的精准信标，仅在浏览器真正提交帧时触发，天然对齐视频源节奏；它需手动递归注册、防重入、轻量处理并实测兼容性，非万能时钟。
要用 requestVideoFrameCallback 做视频帧分析，关键不是“加上这个 API 就变准了”，而是把它当作真实帧节奏的信标——只在浏览器真正提交一帧到画面时才触发，不靠猜、不靠轮询、不被屏幕刷新率带偏。
为什么它比 timeupdate 和 requestAnimationFrame 更可靠
timeupdate 通常每 200–500ms 才触发一次，且和渲染完全脱钩；requestAnimationFrame 绑定屏幕刷新（比如固定 60Hz），但视频可能是 24fps 或 25fps，两者错位会导致采样漂移、漏帧或重复处理。而 requestVideoFrameCallback 在合成器把新帧交出来那一刻调用，30fps 视频就约每 33ms 一次，60fps 就约每 16.7ms 一次，天然对齐视频源节奏。
必须手动递归注册，且防重入
这个 API 是单次回调设计：注册后只触发一次，之后自动注销。常见错误是只调一次就停了，结果只拿到首帧数据。
- 每次回调执行完，立刻再调用 video.requestVideoFrameCallback(callback)
- 用布尔标记（如 isRegistering = true）避免异常导致重复注册
- 暂停或销毁前，记得调用 video.cancelVideoFrameCallback(callback) 清理引用，防止内存泄漏
处理逻辑要轻量，否则会丢帧
回调里不能做耗时操作：比如大尺寸 drawImage、getImageData 全量读取、复杂计算或 DOM 修改。这些会挤占下帧注册窗口，造成链式延迟甚至跳帧。
- 优先复用 OffscreenCanvas 和 ImageData 实例，避免频繁分配内存
- 若需像素分析，先缩放画布尺寸（如 640×360），再取 getImageData
- 把重计算任务移交 Worker，主线程只负责帧捕获与时间戳传递
兼容性不能只看“是否存在”，得实测是否触发
部分 iOS 15.4–15.6 设备虽返回 "requestVideoFrameCallback" in HTMLVideoElement.prototype === true，但回调永不执行，属于“伪支持”。
- 注册后加 200ms 超时兜底，未触发即判定失败
- 降级方案推荐：timeupdate + 帧差检测（监控 currentTime 变化速率，识别真实帧到达）
- 稳定支持版本：Chrome 94+、Edge 94+、Firefox 114+；iOS 需 Safari 16.4+；Android WebView 需 Chrome 100+ 内核
不复杂但容易忽略：它不是万能动画时钟，也不替代 video 自身播放逻辑。专注“帧就绪”这一刻，其余交给 canvas 渲染、Worker 计算或独立 RAF 动画循环协同推进。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
