CODEWITHSUNDEEP
javascripthtmlvideoelectron
João Pereira
João Pereira

Reputation: 713

JavaScript - Read metadata of video file

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.

Upvotes: 5

Views: 9492

Answers (2)

Sasanka Weerakoon
Sasanka Weerakoon

Reputation: 416

If you get the data from form and output its data back to the html file , without using dependencies you can approach this method

document.querySelector('form').addEventListener('submit', function (e) {
    e.preventDefault();
    const video = document.querySelector('#video').files[0];
    const videoUrl = URL.createObjectURL(video);
    const videoElement = document.createElement('video');
    videoElement.src = videoUrl;
    videoElement.onloadedmetadata = function () {
        const videoInfo = document.querySelector('#videoInformation');
        const videoInfoElement = document.createElement('div');
        videoInfoElement.innerHTML = `
            <p>Duration: ${videoElement.duration} seconds</p>
            <p>Width: ${videoElement.videoWidth}</p>
            <p>Height: ${videoElement.videoHeight}</p>
        `;
        videoInfo.appendChild(videoInfoElement);
        URL.revokeObjectURL(videoUrl);
    };
});

Upvotes: 0

ben-perrier
ben-perrier

Reputation: 91

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)
})

Upvotes: 9

Related Questions