https://github.com/dalecurtis/video-animation-frame/blob/master/explainer.md
Summary
Today <video> elements have no means by which to signal when a video frame has been presented for composition nor any means to provide metadata about that frame.
We propose a new HTMLVideoElement.requestAnimationFrame() method with an associated VideoFrameRequestCallback to allow web authors to identify when and which frame has been presented for composition.
Example
let video = document.createElement('video');
let canvas = document.createElement('canvas');
let canvasContext = canvas.getContext('2d');
let frameInfoCallback = (_, metadata) => {
console.log(
`Presented frame ${metadata.presentationTimestamp}s ` +
`(${metadata.width}x${metadata.height}) at ` +
`${metadata.presentationTime}ms for display at ` +
`${expectedPresentationTime}ms`);
canvasContext.drawImage(video, 0, 0, metadata.width, metadata.height);
video.requestAnimationFrame(frameInfoCallback);
};
video.requestAnimationFrame(frameInfoCallback);
video.src = 'foo.mp4';
Output:
Presented frame 0s (1280x720) at 1000ms for display at 1016ms.