Skip to main content

Getting metadata from videos using @remotion/media-parser

Using @remotion/media-parser, you can get metadata from a variety of video formats: MP4, MKV, AVI, WebM and MOV.

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.

Parsing a hosted video
tsx
import {parseMedia} from '@remotion/media-parser';
 
const result = await parseMedia({
  src: 'https://example.com/my-video.mp4',
  fields: {
    durationInSeconds: true,
    dimensions: true,
  },
});
 
console.log(result.durationInSeconds); // 10
console.log(result.dimensions); // {width: 1920, height: 1080}
Parsing a hosted video
tsx
import {parseMedia} from '@remotion/media-parser';
 
const result = await parseMedia({
  src: 'https://example.com/my-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.

Parsing a video from a file path
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}
Parsing a video from a file path
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.
Use webFileReader to read a video from a File.

Parsing a video from a file path
tsx
import {parseMedia} from '@remotion/media-parser';
import {webFileReader} from '@remotion/media-parser/web-file';
 
// 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,
  },
  reader: webFileReader,
});
 
console.log(result.durationInSeconds); // 10
console.log(result.dimensions); // {width: 1920, height: 1080}
Parsing a video from a file path
tsx
import {parseMedia} from '@remotion/media-parser';
import {webFileReader} from '@remotion/media-parser/web-file';
 
// 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,
  },
  reader: webFileReader,
});
 
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 Fields for a complete list.

Getting metadata as soon as possible​

Parsing a video from a File
tsx
import {parseMedia} from '@remotion/media-parser';
 
const result = await parseMedia({
  src: 'https://example.com/my-video.mp4',
  fields: {
    durationInSeconds: true,
    dimensions: true,
  },
  onDurationInSeconds: (durationInSeconds) => {
    console.log(durationInSeconds); // 10
  },
});
 
console.log(result.dimensions); // {width: 1920, height: 1080}
Parsing a video from a File
tsx
import {parseMedia} from '@remotion/media-parser';
 
const result = await parseMedia({
  src: 'https://example.com/my-video.mp4',
  fields: {
    durationInSeconds: true,
    dimensions: true,
  },
  onDurationInSeconds: (durationInSeconds) => {
    console.log(durationInSeconds); // 10
  },
});
 
console.log(result.dimensions); // {width: 1920, height: 1080}

See also​