提问者:小点点

如何从视频HTML元素中获得帧的精确搜索?


如何精确计算您在元素中的位置?

我们知道:

  • CurrentTime不提供精确的时间-请参阅https://github.com/w3C/media-and-entertainment/issues/4

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

  • Firefox错误2/25次
  • 铬不准确8/25倍

共1个答案

匿名用户

示例如下:https://glitch.com/~omniscient-shell-iguana

我们可以看到在整个示例视频中获得精确的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时等于什么来确定。

感谢博文:https://Blog.tomayac.com/2020/05/15/The-RequestVideoFrameCallback-api/