html video 控制逐帧播放？

Question

let dom = $0;
let l = dom.duration * 60;
let t = 1;
dom.currentTime = 0;
dom.pause();
const loop = () => {
  dom.currentTime = (1 / 60) * t;
  if (t++ < l) requestAnimationFrame(loop);
};
requestAnimationFrame(loop);

展示效果只有两三帧有变化，问题是什么呢？

Answer 1

let video = document.querySelector('video');
let canvas = document.querySelector('canvas');
let context = canvas.getContext('2d');

let frameRate = 30; // 视频的帧率
let frameDuration = 1 / frameRate;
let currentTime = 0;

function drawFrame() {
  context.drawImage(video, 0, 0, canvas.width, canvas.height);
  currentTime += frameDuration;
  video.currentTime = currentTime;
  if (currentTime < video.duration) {
    requestAnimationFrame(drawFrame);
  }
}

video.addEventListener('loadeddata', drawFrame);

Answer 2

是想实现快放或慢放的效果吗？playbackRate这个属性就行了吧。