How do you get a frame accurate count of where you are located in a <video/>
element?
We know that:
currentTime
does not give you precise times - See https://github.com/w3c/media-and-entertainment/issues/4Example displaying browser variability: https://daiz.github.io/frame-accurate-ish/
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/