Getting metadata from a video in JavaScript

If you would like to obtain metadata from a video or audio in JavaScript, such as:

Duration
Width and height (Dimensions)
Frame rate

then Mediabunny is the ideal library for doing so.

The example uses Mediabunny's computeFrameRateMetrics() method to determine whether the frame rate is constant or variable.

Getting metadata from a URL

tsx

import {Input, ALL_FORMATS, UrlSource} from 'mediabunny';

export const getMediaMetadata = async (src: string) => {
  const input = new Input({
    formats: ALL_FORMATS,
    source: new UrlSource(src, {
      getRetryDelay: () => null,
    }),
  });

  const durationInSeconds = await input.computeDuration();
  const videoTrack = await input.getPrimaryVideoTrack();
  const dimensions = videoTrack
    ? {
        width: await videoTrack.getDisplayWidth(),
        height: await videoTrack.getDisplayHeight(),
      }
    : null;
  const frameRateMetrics = videoTrack
    ? await videoTrack.computeFrameRateMetrics()
    : null;
  const fps =
    frameRateMetrics === null || frameRateMetrics.probedPacketCount < 2
      ? null
      : frameRateMetrics.bestGuessFrameRate;

  return {
    durationInSeconds,
    dimensions,
    fps,
  };
};

<details> <summary>Explanation</summary> We load a URL (e.g. `https://remotion.media/video.mp4`) and parse it using Mediabunny. We don't care which format, so we load all parsers using `ALL_FORMATS`. By setting `getRetryDelay` to `() => null`, we prevent Mediabunny from infinitely retrying if the request fails. We compute the duration, dimensions, and frame rate. If the media file is an audio file, we return `null` for the dimensions and frame rate. </details>

tsx

import {getMediaMetadata} from './get-media-metadata';

const metadata = await getMediaMetadata('https://remotion.media/video.mp4');

console.log(metadata);
//             ^?

Mediabunny is a dependency-free and fast library.

It works in the browser, but also works in Node.js and Bun.

It supports more container formats than the browser.

It does not need to mount a <video> tag, which would result in other work being done (DOM manipulation and video decoding).

It can return more metadata than the browser, for example the frame rate or the codec.

When not to use Mediabunny

The assets are loaded using fetch(), so they must be accessible for the current website and not be blocked by CORS.

In that case, you are better off using the getVideoMetadata() function from the @remotion/media-utils package, which uses the <video> tag internally.

Getting metadata from a URL

Why we recommend Mediabunny

When not to use Mediabunny

See also