video currentTime 设置后画面卡顿或跳帧的根本原因是浏览器对帧精度、解码状态和渲染管线的调度限制，而非播放器bug；需结合seek事件监听、关键帧对齐、文件编码优化及渲染状态校验综合解决。
video 标签的 currentTime 设置后画面卡顿或跳帧
常见于调用 video.currentTime = x 后，视频实际渲染位置与预期不符，出现“抖动”“回跳”“卡住一帧”等现象。根本原因不是播放器 bug，而是浏览器对帧精度、解码状态和渲染管线的调度限制。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
currentTime是异步操作，设置后立即读取可能仍返回旧值，需监听seeking和seeked事件确认完成 - H.264 等压缩格式依赖关键帧（I-frame），若目标时间点落在 P/B 帧区间，浏览器会自动跳到最近前一个 I-frame —— 这是“跳帧”的主因，非代码错误
- 避免高频设置
currentTime（如 requestAnimationFrame 中连续赋值），容易触发 seek 队列阻塞，引发渲染撕裂 - 可配合
video.getVideoPlaybackQuality()检查droppedVideoFrames和corruptedVideoFrames，定位是否因解码压力导致丢帧
使用 requestVideoFrameCallback 同步渲染帧但依然抖动
该 API 本意是让 JS 与视频渲染帧率对齐，但抖动仍存在，说明问题出在帧采样时机或 video 元素自身状态。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须确保 video 已处于
readyState >= HTMLMediaElement.HAVE_FUTURE_DATA，否则回调中读取的currentTime可能不准确 - 回调函数内不要执行耗时操作（如 DOM 修改、复杂计算），否则挤压下一帧处理窗口，造成累积延迟
- 部分浏览器（如 Safari）对
requestVideoFrameCallback支持不完整，需降级使用requestAnimationFrame+video.videoWidth变化检测作为 fallback - 检查是否启用了
video.setAttribute('playsinline', '')或webkit-playsinline，缺失可能导致 iOS 上渲染管线异常
MP4 文件本身导致 seek 不准或首帧偏移
即使代码无误，视频文件元数据（moov box 位置、关键帧间隔、timecode 起始值）也会直接决定 currentTime 的行为表现。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
ffprobe -v quiet -show_entries stream=nb_frames,r_frame_rate,duration -of csv=p=0 your.mp4查看实际帧率与总帧数，验证是否与前端计算匹配 - 确保 moov box 在文件头部（faststart）：用
ffmpeg -i in.mp4 -c copy -movflags +faststart out.mp4重写 - 关键帧间隔（GOP）过大（如 10s）会导致任意 seek 最大误差达 10 秒 —— 编码时用
-g 60（2s@30fps）更稳妥 - 某些导出工具（如 Premiere）会在视频开头插入黑场或 timecode 偏移，用
ffmpeg -ss 0.1 -i in.mp4 -vframes 1 -f image2 frame.jpg抽帧验证首帧内容
WebGL/Canvas 绘制 video 帧时出现撕裂或错位
当把 video 作为纹理传入 WebGL 或用 canvas.drawImage(video, ...) 截帧时，“抖动”常表现为帧内容错行、上下半帧不一致。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- Canvas 绘制前务必检查
video.readyState === HTMLMediaElement.HAVE_CURRENT_DATA，否则drawImage可能捕获到未更新的旧帧 - WebGL 中使用
texImage2D上传 video 纹理时，需确保 video 宽高是 2 的幂（NPOT），否则部分驱动会自动缩放或采样异常 - 避免在
video播放中直接读取canvas.getContext('2d').getImageData()—— 该操作强制同步读取，极易打断渲染流水线 - 启用
video.setAttribute('webkit-playback-target', 'none')禁用 AirPlay / Chromecast 代理，防止中间层注入额外帧缓冲
真正难调试的抖动，往往卡在“视频文件参数 + 浏览器解码策略 + 渲染管线调度”三者的交界处。别急着改 JS，先用 ffprobe 看 GOP，用 devtools 的 Rendering 面板勾选 “FPS Meter” 和 “Paint Flashing”，再观察抖动是否与帧提交节奏同步。
