11

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!

Hasan Wajahat
  • 1,717
  • 2
  • 16
  • 16

3 Answers3

3

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

qiAlex
  • 4,290
  • 2
  • 19
  • 35
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.

8eecf0d2
  • 1,569
  • 1
  • 13
  • 23
  • 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? – Hasan Wajahat Feb 16 '16 at 04:52
  • @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) – 8eecf0d2 Feb 16 '16 at 05:23
  • Thanks for the share, Sadly chrome has not implemented presentedFrames yet. Mozilla has done so but I need it for chrome. – Hasan Wajahat Feb 16 '16 at 06:10
  • what about `playbackRate` – Muhammad Umer Jan 09 '18 at 03:17
  • 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! – Michael Jan 20 '18 at 09:46
  • 1
    @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. – Armen Michaeli Oct 23 '18 at 12:33
0

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 accompanying 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.

Andy
  • 1
  • 2