能精准对齐弹幕时间点，因其回调参数 mediatime 来自底层解码器时间戳，不受渲染卡顿和主线程阻塞影响；需用 frameinfo.mediatime（非 video.currenttime）、预排序弹幕、帧到时查表，并持续校准应对音视频漂移。
requestVideoFrameCallback 能不能精准对齐弹幕时间点？
不能直接保证精度，但它是目前浏览器中唯一能将 JS 执行时机与视频解码帧真正对齐的机制——比 timeupdate 事件或 setInterval 靠谱得多。它的回调参数里带 mediaTime（单位：秒），这个值来自底层解码器时间戳，不是靠 video.currentTime 读出来的估算值，因此不受渲染卡顿、JS 主线程阻塞影响。
常见错误是把它当 requestAnimationFrame 用：传入一个无参函数，然后自己去读 video.currentTime。这完全失去意义——currentTime 在高负载下可能滞后几十毫秒，而弹幕偏移 50ms 就明显“飘”了。
实操要点：
- 必须使用回调函数的第二个参数
frameInfo，从中取frameInfo.mediaTime，不是video.currentTime - 注册前确保
video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA，否则回调不触发 - 每次回调只处理「当前帧时间 ± 1 帧间隔」范围内的弹幕（比如 60fps 视频，容差设为 16.7ms）
如何把弹幕数据按 mediaTime 精确调度？
核心不是“定时显示”，而是“帧到时查表”。你需要预先把弹幕列表按 startTime 排序，并维护一个读取指针，避免每帧都遍历全部弹幕。
示例逻辑（伪代码）：
let danmakuList = [{ startTime: 12.345, text: "前方高能" }, ...]; // 已排序
let nextIndex = 0;
<p>function onFrameRender(nowMediaTime, frameInfo) {
const tolerance = 1000 / 60; // ≈16.7ms
while (nextIndex nowMediaTime + tolerance) break;
if (dm.startTime >= nowMediaTime - tolerance) {
renderDanmaku(dm);
}
nextIndex++;
}
video.requestVideoFrameCallback(onFrameRender);
}</p>
注意：renderDanmaku 应尽量轻量（如仅创建 DOM 元素并设置 transform），避免在回调里做 layout 或重排；真实项目中建议用 requestIdleCallback 或 queueMicrotask 延后渲染，防止阻塞下一帧回调。
为什么 requestVideoFrameCallback 在某些设备上不触发？
最常见原因是视频未启用硬件加速解码，或处于非活跃标签页。Chrome 要求视频已播放（video.play() 成功 resolve 后），且不能是静音/自动播放被拦截状态；Safari 目前（v17+）仅支持 video 元素，不支持 canvas.captureStream() 生成的流。
兼容性兜底策略：
- 检测
HTMLVideoElement.prototype.requestVideoFrameCallback是否存在 - 不存在时降级为监听
timeupdate+performance.now()插值估算当前帧时间（误差通常 30–100ms） - 若检测到长时间无回调（如 500ms），主动 fallback 并记录 warn：可能是视频暂停、后台标签页或 DRM 内容限制
特别注意：MP4 文件若没有正确设置 moov 原子位置（即未“faststart”），会导致首帧解码延迟，requestVideoFrameCallback 可能等到第 3–5 帧才首次触发。
弹幕漂移的隐藏元凶：音视频不同步导致的 mediaTime 漂移
mediaTime 实际反映的是音轨时间轴（AV sync master），当视频因丢帧、解码慢、或音频缓冲不足发生 A/V drift 时，mediaTime 会悄悄“拉长”或“压缩”，导致弹幕整体提前或延后数秒——这种问题在长视频、低配设备、或使用 WebAssembly 解码器时尤为明显。
应对方式：
- 定期（如每 10 秒）用
video.getVideoPlaybackQuality()检查droppedVideoFrames和corruptedVideoFrames - 当累计丢帧 > 5% 时，暂停弹幕调度，重置
nextIndex并基于最新frameInfo.mediaTime重新对齐 - 不依赖单次
mediaTime绝对值，改用 delta：记录上一帧lastMediaTime，本次应显示的弹幕起始时间为lastMediaTime + (nowMediaTime - lastMediaTime)，可缓解突变抖动
真正的难点不在调用 API，而在持续校准——视频时间轴本身是动态的，弹幕系统必须把它当作一个有噪声的传感器信号来处理，而不是一个精确时钟。
