Can I get the number of the current frame in an HTML5 video?

Question

I am currently trying to customize an HTML5 video player so that I can add a button that returns the current frame number.

Lets say I have a 30fps video that lasts 90 seconds. When I click on that button I want it to print me the number of the current frame. Is that possible?

Answer 1

I think you can use the following API for Webkit/Mozilla based browser:

Mozilla have implemented the following statistics into Firefox:

mozParsedFrames - number of frames that have been demuxed and extracted out of the media.
mozDecodedFrames - number of frames that have been decoded - converted into YCbCr.
mozPresentedFrames - number of frames that have been presented to the rendering pipeline for rendering - were "set as the current image".
mozPaintedFrames - number of frames which were presented to the rendering pipeline and ended up being painted on the screen. Note that if the video is not on screen (e.g. in another tab or scrolled off screen), this counter will not increase.
mozFrameDelay - the time delay between presenting the last frame and it being painted on screen (approximately). 

Mozilla are also working on some of the statistics listed here.

Webkit have implemented these:

webkitAudioBytesDecoded - number of audio bytes that have been decoded.
webkitVideoBytesDecoded - number of video bytes that have been decoded.
webkitDecodedFrames - number of frames that have been demuxed and extracted out of the media.
webkitDroppedFrames - number of frames that were decoded but not displayed due to performance issues. 

I still investigating the resolution on IE9...

Reference:http://wiki.whatwg.org/wiki/Video_Metrics

Answer 2

I don't think there is a set standard framerate across browsers or any way of accessing the current frame out of the box with html5 video. What you could do though is use the television standard framerate of 29.97 frames per second and simply multiply that by the video's current time like so: (vid.currentTime * 29.97).toPrecision(6) .

Here's a fiddle I set up demonstrating how to bind this to a button to get the current frame: http://jsfiddle.net/893aM/1/

Answer 3

There is a decent Video Frame JS lib to work with frames https://github.com/X3TechnologyGroup/VideoFrame

It's very old question, but this may be useful for new readers.

Ref: Get frame numbers in HTML5 Video