Skip to main content

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 the getVideoFrameRate() code snippet to determine whether the frame rate is constant or variable.

Getting metadata from a URL​

get-media-metadata.ts
import {Input, ALL_FORMATS, UrlSource} from 'mediabunny';
import {getVideoFrameRate} from './get-video-frame-rate';

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 frameRate = await getVideoFrameRate(input);
  const fps =
    frameRate === null
      ? null
      : frameRate.type === 'constant'
        ? frameRate.rate
        : frameRate.max;

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

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.

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

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

console.log(metadata);
//             ^?

Why we recommend Mediabunny​

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.

See also​