阶段 7 · 视频帧基础20 分钟
视频帧回调：跟着真正抵达的画面工作
requestVideoFrameCallback、元数据与丢帧判断
用生成的视频流观察逐帧回调，读取 mediaTime、presentedFrames，并和页面刷新回调对照。
LEARNING GOALS
先明确本课目标
1
注册逐视频帧回调
2
读取帧时间与展示元数据
3
识别视频帧率和屏幕刷新率差异
MENTAL MODEL · 再建立心智模型
requestAnimationFrame 跟着屏幕刷新，requestVideoFrameCallback 跟着视频画面抵达合成器；处理视频内容时应尽量站在后者的节拍上。
MINIMAL EXAMPLE
它和 requestAnimationFrame 最大的不同是什么？
requestVideoFrameCallback 由视频帧提交到合成器的节奏驱动，并提供 mediaTime、presentedFrames 等元数据；requestAnimationFrame 主要跟随页面显示刷新。
javascriptfunction onFrame(now, metadata) {
console.log(metadata.mediaTime, metadata.presentedFrames);
video.requestVideoFrameCallback(onFrame);
}
video.requestVideoFrameCallback(onFrame);- 收到真实帧通知 只有新视频帧抵达展示路径时才调用，而不是每次屏幕刷新都调用。
- 读取媒体元数据 mediaTime 属于媒体时间轴，presentedFrames 可帮助识别跳帧。
- 继续订阅下一帧 回调是一次性的，需要在处理末尾再次注册。
逐帧处理频率自然跟随视频内容，而不会在 24 FPS 视频上无意义地跑满 60 FPS。
OPTIONAL · 按需查阅完整术语表与概念边界遇到陌生术语时再展开，不打断主线实验。
展开⌄
音视频基础Media Timeline媒体播放头所在的时间轴，受暂停、定位、播放速度和缓冲状态影响，不等同于页面单调时钟。音视频基础Video Frame带尺寸、时间戳和颜色信息的一张视频画面，可来自解码器、视频元素、Canvas 或 WebCodecs。音视频基础requestVideoFrameCallback在新视频帧准备提交给合成器时回调应用的 HTMLVideoElement 方法，并提供媒体时间与呈现统计。音视频基础requestAnimationFrame浏览器在下一次页面绘制前调用回调的调度方法，跟随显示刷新节奏，但不保证此时恰好有新视频帧。音视频基础mediaTimerequestVideoFrameCallback 元数据中当前视频帧在媒体时间轴上的呈现时间，单位为秒。音视频基础presentedFramesrequestVideoFrameCallback 报告的累计已提交合成帧数；相邻回调计数跳变可作为中间丢帧线索。音视频基础Dropped Frame因解码、渲染或调度未赶上呈现节奏而没有显示的视频帧；它与播放器主动同步丢帧的原因可能不同。
LIVE EXPERIMENT · 先获得反馈
边改边运行
浏览器加载后会激活代码编辑器、独立运行环境与实时输出。
本课挑战
做一个按实际帧间隔标红卡顿点的视频节奏诊断器。
回到原理，解释刚才发生了什么
先用结果建立反馈，再按运行流程、核心原理和知识关系逐层深入。
CORE IDEA
核心讲解
回调与视频帧对齐
该回调在新视频帧交给合成器时触发，并提供媒体时间和预计展示时间，比 timeupdate 更适合逐帧分析。
仍然不是硬实时保证
回调运行在主线程，繁重处理可能延迟下一帧。应控制单帧预算，必要时把分析移到 Worker 或降低处理分辨率。
OPTIONAL · 迁移时查阅Web 与原生实现对照主线实验完成后，再用完整映射处理跨平台或跨 API 迁移。
展开⌄
跟着屏幕刷新和跟着视频帧抵达，是两个相邻但不同的节奏。
WebGL
requestVideoFrameCallback 在新视频帧提交给合成器时触发，并附带媒体元数据。
WebGPU
requestAnimationFrame 适合页面动画与最终绘制，节奏主要由显示刷新率决定。
处理视频内容时以视频帧回调取样，最终 UI 绘制仍可按页面刷新合并。