Where in metadata of a video in html5 is the fps saved?

Question

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!

Solution 1

Try https://mediainfo.js.org (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

Solution 2

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.com/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.

Comments

[Hasan Wajahat]

Thanks brod, I also think that it is unlikely that fps is given as a property by the html video element. I was just hoping that it would be otherwise. I like your given solution but how do I calculate PresentFrames? Because the way to measure frames is to use fps and current time. Is there another way to find PresentFrames?

[8eecf0d2]

@HasanWajahat I've updated my answer with a source that documents many different attributes that could be useful in calculating the fps (specifically the PresentedFrames)

[Hasan Wajahat]

Thanks for the share, Sadly chrome has not implemented presentedFrames yet. Mozilla has done so but I need it for chrome.

[Muhammad Umer]

what about playbackRate

[Michael]

and here i am trying to advance the time index and render on a canvas and see at what point in time it changes, only it doesn't work because i'm running off file:// and it won't let me look at the pixels!

[Armen Michaeli]

@MuhammadUmer playbackRate is a real number indicating whether the playback is faster (values bigger than 1.0) or slower (values smaller than 1.0) than what the stream frame rate suggests.

[Brian Klug]

Just wasted an entire morning, the .js file is small but it fetches a 2.5MB .wasm file to do the work. Ouch.

[dfranca]

Can this library be used against a remote file?