HTML5视频倒放方法及代码实现

HTML5视频原生不支持负播放速率（如playbackRate = -1），这是W3C规范明确限制的，所有主流浏览器都会将负值强制归零；因此真正的“倒放”必须通过手动控制currentTime实现——暂停视频后，利用requestAnimationFrame高精度逐帧递减当前时间点，结合帧率换算（如60fps对应每次减约16.67ms）、边界检测（防止低于0）和缓冲/I帧依赖优化，才能模拟出流畅稳定的逆向播放效果，既绕过浏览器限制，又兼顾性能与同步性。

HTML5原生不支持playbackRate设为负数

直接给video.playbackRate = -1在所有主流浏览器都会被忽略，playbackRate只接受 ≥ 0 的值。这不是bug，是规范限制——W3C明确要求负值必须被clamp到0。所以“倒放”必须靠其他手段模拟。

用requestAnimationFrame手动控制currentTime

核心思路：禁用默认播放，用定时循环不断减小video.currentTime，并确保帧率稳定。关键点不是“快慢”，而是“逐帧逆向跳转”的精度和同步性。

• 先调用video.pause()，避免原生播放逻辑干扰
• 用requestAnimationFrame而非setInterval，更贴合渲染节奏，减少丢帧
• 每次减去的毫秒数要对应目标帧率（如60fps → 每次减1000/60 ≈ 16.67ms）
• 必须监听timeupdate或检查currentTime ≤ 0来终止，否则会卡在负值或触发异常

let isReversing = false;
let reverseInterval;
<p>function startReverse(video) {
if (isReversing) return;
isReversing = true;
video.pause();</p><p>function reverseStep() {
if (!isReversing || video.currentTime <= 0) {
video.currentTime = 0;
isReversing = false;
return;
}
video.currentTime = Math.max(0, video.currentTime - 16.67);
requestAnimationFrame(reverseStep);
}
requestAnimationFrame(reverseStep);
}</p>

注意video.buffered和解码限制

浏览器不会预加载“反向所需”的帧。当currentTime跳到未缓冲的位置，会出现卡顿、黑屏或seeking事件反复触发。尤其H.264视频依赖I帧，倒放时若跳到P/B帧位置，可能无法渲染。

• 倒放前尽量确保整段视频已buffered（可监听canplaythrough后再操作）
• 对长视频，倒放体验差是常态，不要强求全时段流畅
• MP4封装+H.264编码下，倒放实际是“向前解码+向后丢弃”，性能开销比正向高

WebGL/Canvas方案适合高精度但复杂度陡增

如果需要逐帧像素级控制（比如加滤镜、变速倒放），就得把视频帧抽成ImageBitmap或texture，用Canvas重绘。这时video仅作数据源，播放逻辑完全自控。

• 需开启video.crossOrigin = "anonymous"才能读取像素（否则canvas.getContext('2d').getImageData()报错）
• 用video.requestVideoFrameCallback()（Chrome 94+）比requestAnimationFrame更准，能对齐视频帧节奏
• 移动端性能敏感，Canvas倒放易掉帧，务必做cancelVideoFrameCallback清理

真要倒放，优先接受“近似可用”；追求精确，就得放弃标签直连，转向底层帧处理。这点容易被低估。

以上就是《HTML5视频倒放方法及代码实现》的详细内容，更多关于的资料请关注golang学习网公众号！