HTML视频播放完成后如何实现倒放？playbackRate=-1不支持问题

当环境不支持通过playbackRate=-1实现视频倒放时，可通过Canvas逐帧渲染的方式模拟反向播放效果，核心思路是手动控制视频的currentTime回退，并将每一帧绘制到Canvas上展示。

实现步骤与代码示例 #

1. HTML结构

准备视频元素和用于展示反向帧的Canvas：

<video id="targetVideo" src="your-video-source.mp4" controls></video>
<canvas id="reverseCanvas" style="display: none; width: 100%;"></canvas>

2. JavaScript逻辑

监听视频播放结束事件，触发反向播放流程：

const video = document.getElementById('targetVideo');
const canvas = document.getElementById('reverseCanvas');
const ctx = canvas.getContext('2d');
let reverseTimer;

// 同步Canvas尺寸与视频原生尺寸
video.addEventListener('loadedmetadata', () => {
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
});

// 视频播放结束后启动反向播放
video.addEventListener('ended', () => {
  // 隐藏原视频，显示Canvas
  video.style.display = 'none';
  canvas.style.display = 'block';
  startReversePlayback();
});

function startReversePlayback() {
  // 定位到视频末尾
  video.currentTime = video.duration;
  // 匹配原视频帧率（可根据实际视频调整）
  const targetFps = 24;
  const frameStep = 1000 / targetFps;

  reverseTimer = setInterval(() => {
    // 逐帧回退时间轴
    video.currentTime -= 1 / targetFps;
    // 将当前视频帧绘制到Canvas
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

    // 到达视频开头时停止反向播放，恢复原视频状态
    if (video.currentTime <= 0) {
      clearInterval(reverseTimer);
      canvas.style.display = 'none';
      video.style.display = 'block';
      video.currentTime = 0;
    }
  }, frameStep);
}

关键注意事项 #

• Seek兼容性：确保视频支持任意时间点的seek操作，部分流媒体或未完全加载的视频可能无法正常回退，可提前设置video.preload="auto"提升加载效果。
• 帧率匹配：targetFps需尽量与原视频帧率一致，否则反向播放的速度会和原视频不符。
• 性能优化：如果视频时长较长，可提前预加载所有帧到Image数组中，避免频繁seek带来的性能损耗，示例如下：

// 预加载所有帧的示例（仅适用于短视频）
let frameCache = [];
const targetFps = 24;
function preloadFrames() {
  const totalFrames = video.duration * targetFps;
  let currentFrame = 0;
  const preloadInterval = setInterval(() => {
    video.currentTime = currentFrame / targetFps;
    const frameImg = new Image();
    frameImg.src = canvas.toDataURL();
    frameCache.push(frameImg);
    currentFrame++;
    if (currentFrame >= totalFrames) {
      clearInterval(preloadInterval);
      // 预加载完成后可直接反向遍历frameCache播放
    }
  }, 1000 / targetFps);
}

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