Skip to main content

How do I make the composition the same duration as my video?

If you have a component rendering a video:

MyComp.tsx
import {Video} from '@remotion/media';
import React from 'react';
import {staticFile} from 'remotion';

export const MyComp: React.FC = () => {
  return <Video src={staticFile('video.mp4')} />;
};

and you want to make the composition the same duration as the video, first make the video source a React prop:

MyComp.tsx
import {Video} from '@remotion/media';
import React from 'react';

type MyCompProps = {
  src: string;
};

export const MyComp: React.FC<MyCompProps> = ({src}) => {
  return <Video src={src} />;
};

Then, define a calculateMetadata() function that calculates the duration of the composition based on the video.
Install Mediabunny if necessary.

MyComp.tsx

import {ALL_FORMATS, Input, UrlSource} from 'mediabunny';
import type {CalculateMetadataFunction} from 'remotion';

export const calculateMetadata: CalculateMetadataFunction<MyCompProps> = async ({props}) => {
  const input = new Input({
    formats: ALL_FORMATS,
    source: new UrlSource(props.src, {
      getRetryDelay: () => null,
    }),
  });

  const [durationInSeconds, videoTrack] = await Promise.all([
    input.computeDuration(),
    input.getPrimaryVideoTrack(),
  ]);

  if (videoTrack === null) {
    // For example when passing an MP3 file:
    throw new Error('Not a video file');
  }

  const [width, height] = await Promise.all([
    videoTrack.getDisplayWidth(),
    videoTrack.getDisplayHeight(),
  ]);
  const fps = 30;

  return {
    durationInFrames: Math.ceil(durationInSeconds * fps),
    fps,
    width,
    height,
  };
};

Mediabunny loads the asset using fetch(). Remote URLs must be CORS-enabled; files referenced with staticFile() are served from the same origin.

Finally, pass the calculateMetadata() function to the <Composition> component and define the previously hardcoded src as a default prop:

Root.tsx

import React from 'react';
import {Composition} from 'remotion';
import {calculateMetadata} from './calculate-metadata';
import {MyComp} from './MyComp';

export const Root: React.FC = () => {
  return (
    <Composition
      id="MyComp"
      component={MyComp}
      durationInFrames={300}
      fps={30}
      width={1920}
      height={1080}
      defaultProps={{
        src: 'https://remotion.media/BigBuckBunny.mp4',
      }}
      calculateMetadata={calculateMetadata}
    />
  );
};

How do I make the composition the same duration as my audio?​

Follow the same steps. Mediabunny's computeDuration() also returns the duration of an audio file. Omit the video track check and the width and height fields from the returned metadata.

See Also​