In order to fully implement my custom html5 video player, I need the the exact frame rate of a video. However I have not been able to find it yet and am using a standard value of 25. Typically videos have a frame rate value in meta-data so I accessed meta-data using something like this:

var vid = document.getElementById("myVideo");
vid.onloadedmetadata = function(e) {
console.log(e);
};

However I can't find frame rate here. Maybe I am not reading metadata at all. I can use your help. Thanks!

In order to fully implement my custom html5 video player, I need the the exact frame rate of a video. However I have not been able to find it yet and am using a standard value of 25. Typically videos have a frame rate value in meta-data so I accessed meta-data using something like this:

var vid = document.getElementById("myVideo");
vid.onloadedmetadata = function(e) {
console.log(e);
};

However I can't find frame rate here. Maybe I am not reading metadata at all. I can use your help. Thanks!

• javascript
• html
• html5-video
• frame-rate

3 Answers 3

Try https://mediainfo.js (github)

It works on ui only, no backend needed

I just implemented it and it looks like it worked perfectly fine (at least in Chrome v 70.0.3538.77) for gettting wide media information

It looks like modern browsers beginning to work with some binary libraries

I'm 95% sure the standard html5 video api does not expose the fps information, from what I've read in the past months - other apis like MPEG-DASH and jwplayer do present more / different data.

Your best bet would be to snoop around w3schools./tags/ref_av_dom.asp and similar mdn pages.

You can calculate this in realtime yourself and it should work most of the time but I can imagine there's a case or two when it wouldn't. Look at PresentedFrames and then do something like:

fps = video.time / PresentedFrames

view more about PresentedFrames here (currently proposal) and similar attributes at the same link.

mediainfo.js works pretty good - even if used locally in a browser using 'http(s)://'.

To use it locally, just make sure you also download the acpanying mediainfo.wasm and put it into the same directory as mediainfo.min.js.

Alternatively you can install media-info using npm.

The only caveat is, that it doesn't run from the 'file://' protocol.