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

|▌冷眼眸甩不掉的悲伤 提交于 2019-11-29 06:37:21

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/

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

Rohan Chandane

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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!