9

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?

Paul D. Waite
  • 96,640
  • 56
  • 199
  • 270
test
  • 111
  • 1
  • 1
  • 3

3 Answers3

3

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/

Paul Graffam
  • 2,139
  • 2
  • 18
  • 20
  • 2
    Although this is an old answer, please do note that "television standard" is not the same in the US as in the rest of the world. Most of the web video's are encoded and filmed @ 25FPS anyway. – WesleyE Jul 05 '12 at 21:52
  • 2
    `.currentTime` isn't nearly accurate enough to get down to a per-frame level. – Brad Dec 03 '13 at 03:50
2

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

Michael.Zhou
  • 169
  • 1
  • 2
  • 7
  • webkit attributes have changed https://github.com/adobe/webkit/blob/master/ManualTests/video-statistics.html – Macbric Apr 01 '19 at 20:59
1

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

Community
  • 1
  • 1
Rohan Chandane
  • 367
  • 4
  • 16
  • I checked it using ffmpeg software and quick time player. Sometimes total count of frames given by videoframe is 1-2 different from count by ffmpeg. – Soorajlal K G Jun 18 '18 at 14:46