Chapter 8: Variable duration and dimensions

Core Idea

You may change the duration of the video based on some asynchronously determined data. The same goes for the width, height and framerate of the video.

Key Concepts

• Using the calculateMetadata() function<AvailableFrom v="4.0.0"/>
• With useEffect() and getInputProps()
• Drawbacks
• Using together with dimension overrides
• Changing dimensions and FPS after the video was designed
• With the <Player>
• See also

Code Examples

// @filename: get-media-metadata.ts

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: videoTrack.displayWidth,
        height: videoTrack.displayHeight,
      }
    : null;
  const frameRateMetrics = videoTrack
    ? await videoTrack.computeFrameRateMetrics()
    : null;
  const fps =
    frameRateMetrics === null || frameRateMetrics.probedPacketCount < 2
      ? null
      : frameRateMetrics.bestGuessFrameRate;

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

// @filename: index.tsx

type MyCompProps = {
  src: string;
};

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

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={async ({props}) => {
        const {durationInSeconds, fps} = await getMediaMetadata(props.src);
        const compositionFps = fps ?? 30;

       
// ...(truncated)

• What it demonstrates: Usage pattern for Variable duration and dimensions from the official docs.

Key Takeaways

1. Understand using the calculatemetadata() function<availablefrom v="4.0.0"/> when working with Variable duration and dimensions.
2. Understand with useeffect() and getinputprops() when working with Variable duration and dimensions.
3. Understand drawbacks when working with Variable duration and dimensions.
4. Understand using together with dimension overrides when working with Variable duration and dimensions.
5. Understand changing dimensions and fps after the video was designed when working with Variable duration and dimensions.

Connects To

• Absolute Fill: related page in the Fundamentals & Core Concepts section.
• Animating Properties: related page in the Fundamentals & Core Concepts section.
• Animation Math: related page in the Fundamentals & Core Concepts section.