javascripthtmlvideohtml5-video

How to Get Frame Accurate Seeking from Video HTML Element?


How do you get a frame accurate count of where you are located in a <video/> element?

We know that:

Example displaying browser variability: https://daiz.github.io/frame-accurate-ish/


Solution

  • With example here: https://adhesive-smooth-produce.glitch.me

    We're able to see the following works in getting accurate frame count across the entirety of the example video - something not able to be done w/ the currentTime parameter.

      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 must be determined from seeing what const frames = Math.round(metadata.mediaTime * fps) equals to at time = 0.

    Thanks to Blog Post: https://blog.tomayac.com/2020/05/15/the-requestvideoframecallback-api/