暂停HTML5视频设置重复currentTime导致帧跳转偏移问题问询

我想用JS逐帧控制视频，已知视频FPS时，通过video.currentTime = 帧数/FPS就能定位对应帧，操作逻辑很直接。但遇到一个跨浏览器的异常：

• 用视频控件暂停视频后
• 执行video.currentTime = video.currentTime，视频画面会回跳1-2帧

该问题已在Firefox 123、Chrome 122、Safari 17.2.1中验证，测试视频参数为60fps、1.5Mb/s、关键帧间隔15。

测试流程 #

1. 点击视频控件的Pause按钮暂停视频
2. 点击页面空白区域（非视频元素）
3. 按下键盘"t"键触发video.currentTime = video.currentTime，观察画面跳转

问题原因分析 #

这个现象和视频编码机制、浏览器对currentTime的处理逻辑直接相关：

• 关键帧与预测帧的依赖限制：你的视频关键帧间隔是15，意味着每15帧才有一个完整的关键帧（I帧），中间帧都是依赖前序帧的预测帧（P/B帧）。视频暂停时浏览器显示的是某个预测帧，但currentTime返回的是该帧的时间戳。当你重新赋值currentTime时，浏览器会触发seek操作，它会优先找到离该时间戳最近的关键帧，再解码后续帧到目标时间点。这个过程中，可能因为解码逻辑的特性，最终渲染的是关键帧后的前几帧，而非之前暂停的预测帧，导致画面回跳。
• 浮点精度带来的时间戳偏差：currentTime返回的是浮点数，而视频帧的时间戳是离散的（比如60fps下每帧间隔约0.016666...秒）。读取currentTime时，可能因为浏览器内部计时的精度问题，得到的数值和实际帧的精确时间戳有微小偏差。重新赋值这个带偏差的时间戳时，浏览器会匹配到最近的更早帧，引发画面回跳。
• 暂停状态的seek触发逻辑：视频暂停时，浏览器会保留当前渲染的帧，但只要修改currentTime（哪怕是赋值自身），都会触发完整的seek流程——这个流程会重新初始化解码链路，而非直接复用当前已渲染的帧，最终导致seek后的帧和之前暂停的帧不一致。

内容的提问来源于stack exchange，提问作者brufru