html - JavaScript - Read metadata of video file

Question

I've been at this for hours, it's time to ask for a little help.

I need to know the frame rate of a video on load in JavaScript/HTML and I'm trying to avoid VLC plug-in or ffmpeg.

The browser reads the video metadata to check the intended frame rate, so how can I do this as well? I read a lot of online things and didn't find anything useful but I can't believe that this is unfeasible.

I'm looking for this but for videos. Should be simple, right?

Note: I'm building a desktop app with Electron so file access isn't a problem.

Answer 1

You can create a video element with src attribute pointing to a link or local file/blob

let video = document.createElement('video')
video.setAttribute('src', window.URL.createObjectURL(file))

Add onloadeddata event listener to the element and in the callback you'll have access to the video metadata.

video.onloadeddata = function(event) {
  const {
    videoHeight,
    videoWidth,
    duration
  } = event.srcElement
  console.log(videoHeight)
})