Getting metadata from videos using @remotion/media-parser

:::warning We are phasing out Media Parser and are moving to Mediabunny! :::

Not recommended anymore

We are phasing out Media Parser and are moving to Mediabunny!
See: Getting metadata using Mediabunny for the new recommended way.

Using @remotion/media-parser, you can get metadata from a variety of media formats.

Getting metadata from a URL

Specify the fields you would like to read and the URl as src.
This works in the browser as well as in Node.js and Bun.

tsx

import {parseMedia} from '@remotion/media-parser';

const result = await parseMedia({
  src: 'https://remotion.media/video.mp4',
  fields: {
    durationInSeconds: true,
    dimensions: true,
  },
});

console.log(result.durationInSeconds); // 10
console.log(result.dimensions); // {width: 1920, height: 1080}

Getting metadata from a local path

Use nodeReader to read a file from a filesystem.
This can be used in Node.js and Bun.

tsx

import {parseMedia} from '@remotion/media-parser';
import {nodeReader} from '@remotion/media-parser/node';

const result = await parseMedia({
  src: '/tmp/video.mp4',
  fields: {
    durationInSeconds: true,
    dimensions: true,
  },
  reader: nodeReader,
});

console.log(result.durationInSeconds); // 10
console.log(result.dimensions); // {width: 1920, height: 1080}

Getting metadata from a `File`

If you take user uploads in the browser, they will be in the form of a File.

tsx

import {parseMedia} from '@remotion/media-parser';

// You would get this from a `<input type="file">`
const file = new File([], 'video.mp4');

const result = await parseMedia({
  src: file,
  fields: {
    durationInSeconds: true,
    dimensions: true,
  },
});

console.log(result.durationInSeconds); // 10
console.log(result.dimensions); // {width: 1920, height: 1080}

Available fields

You can read the duration, the dimensions, the framerate, the container format, the codecs, the ID3 tags and more information from a video file.

See Available Fields for a complete list.

Getting metadata as soon as possible

tsx

import {parseMedia} from '@remotion/media-parser';

const result = await parseMedia({
  src: 'https://remotion.media/video.mp4',
  fields: {
    durationInSeconds: true,
    dimensions: true,
  },
  onDurationInSeconds: (durationInSeconds) => {
    console.log(durationInSeconds); // 10
  },
});

console.log(result.dimensions); // {width: 1920, height: 1080}