视频搜索滚动（60fps）

Question

试图在页面滚动时通过视频寻求效果。通过将视频的所有帧导出到JPEG图像，预先加载图像并将其渲染到canvas来实现这一目标。但是，这种方法使用了很多带宽，并且需要很长时间才能加载慢速网络。

尝试通过将视频呈现到Canvas来实现相同的效果并不像基于图像的方法那样顺利。

这是一个具有基于视频的方法的工作演示：

https：/ /codesandbox.io/s/infallible-chaum-grvi0r?file=/index.html

htmlmediaelement.fastseek（）没有广泛的浏览器覆盖范围，如何实现30-60 fps的实时播放率？

这是效果的相关代码（有关完整代码，请参见上面的CSB链接）：

const video = document.querySelector("video");
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");

(function tick() {
  requestAnimationFrame(tick);

  const { scrollHeight, clientHeight, scrollTop } = document.body;
  const maxScroll = scrollHeight - clientHeight;
  const scrollProgress = scrollTop / maxScroll;

  canvas.width = document.body.clientWidth;
  canvas.height = document.body.clientHeight;

  // This is the line that causes the issue
  video.currentTime = video.duration * scrollProgress;

  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
})();

Answer 1

该问题是由于 drawImage() 的具体情况造成的，如此处，仅应在触发 seeked 事件后调用它。下面的代码通过使用标记值 (seeked = false) 解决了该问题，该值将阻止 drawImage() 的执行，直到下一个 seeked事件：

const video = document.querySelector("video");
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
let seeked;
(function tick() {
    requestAnimationFrame(tick);
    if (seeked) {
        seeked = false;
        const { scrollHeight, clientHeight, scrollTop } = document.body;
        const maxScroll = scrollHeight - clientHeight;
        const scrollProgress = scrollTop / Math.max(maxScroll, 1);

        canvas.width = document.body.clientWidth;
        canvas.height = document.body.clientHeight;

        // This is the line that causes the issue
        video.currentTime = video.duration * scrollProgress;

        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
    }
})();
video.addEventListener('seeked', () => {
    seeked = true;
});
video.currentTime = .001;