如何从视频 HTML 元素中获取帧精确搜索？

Question

您如何获得您在 <video/> 元素中所处位置的精确计数？

我们知道：

currentTime 没有给你准确的时间 - 请参阅 https://github.com/w3c/media-and-entertainment/issues/4

显示浏览器可变性的示例：https://daiz.github.io/frame-accurate-ish/

Firefox 不准确 2/25 次
Chrome 不准确 8/25 次

Answer 1

以此处为例： https://adhesive-smooth-produce.glitch.me

我们能够看到以下工作在整个示例视频中获得准确的 frame 计数 - 使用 currentTime 参数无法做到这一点。

  const updateCanvas = (now, metadata) => {
    if (startTime === 0.0) {
      startTime = now;
    }
    
    ctx.drawImage(video, 0, 0, width, height);
    
    let frameOffset = 2
    const frames = Math.round(metadata.mediaTime  * fps) - frameOffset
    fpsInfo.innerText = !isFinite(frames) ? 0 : frames;
    metadataInfo.innerText = JSON.stringify(metadata, null, 2);

    video.requestVideoFrameCallback(updateCanvas);
  };  

  video.src =
    "https://daiz.github.io/frame-accurate-ish/time.mp4";
  video.requestVideoFrameCallback(updateCanvas);

frameOffset 必须通过查看 const frames = Math.round(metadata.mediaTime * fps) 等于 time = 0.

来确定

感谢博客 Post：https://blog.tomayac.com/2020/05/15/the-requestvideoframecallback-api/

如何从视频 HTML 元素中获取帧精确搜索？

How to Get Frame Accurate Seeking from Video HTML Element?

html

javascript

video

html5-video