Deft
Ask AI

Search

Search skills, authors and topics

remotion-dev / skills

remotion-markup

Structure Remotion scenes with markup patterns for layout, typography, and reusable video UI.

View sourceVideoRemotion

Install

npx skills add https://github.com/remotion-dev/skills --skill remotion-markup
metadata
tags: calculateMetadata, duration, dimensions, props, dynamic

Using calculateMetadata

Use calculateMetadata on a <Composition> to dynamically set duration, dimensions, and transform props before rendering. Use it when metadata depends on input props, fetched data, or asset metadata. For static dimensions, duration, FPS, and initial props, inline the values on <Composition> instead.

tsx
<Composition  id="MyComp"  component={MyComponent}  durationInFrames={300}  fps={30}  width={1920}  height={1080}  defaultProps={{ videoSrc: "https://remotion.media/video.mp4" }}  calculateMetadata={calculateMetadata}/>

Setting duration based on a video

Use the getVideoDuration (get-video-duration.md in the remotion-multimedia skill) and getVideoDimensions (get-video-dimensions.md in the remotion-multimedia skill) skills to get the video duration and dimensions:

tsx
import { CalculateMetadataFunction } from "remotion";import { getVideoDuration } from "./get-video-duration";
const calculateMetadata: CalculateMetadataFunction<Props> = async ({  props,}) => {  const durationInSeconds = await getVideoDuration(props.videoSrc);
  return {    durationInFrames: Math.ceil(durationInSeconds * 30),  };};

Matching dimensions of a video

Use the getVideoDimensions (get-video-dimensions.md in the remotion-multimedia skill) skill to get the video dimensions:

tsx
import { CalculateMetadataFunction } from "remotion";import { getVideoDuration } from "./get-video-duration";import { getVideoDimensions } from "./get-video-dimensions";
const calculateMetadata: CalculateMetadataFunction<Props> = async ({  props,}) => {  const dimensions = await getVideoDimensions(props.videoSrc);
  return {    width: dimensions.width,    height: dimensions.height,  };};

Setting duration based on multiple videos

tsx
const calculateMetadata: CalculateMetadataFunction<Props> = async ({  props,}) => {  const metadataPromises = props.videos.map((video) =>    getVideoDuration(video.src),  );  const allMetadata = await Promise.all(metadataPromises);
  const totalDuration = allMetadata.reduce(    (sum, durationInSeconds) => sum + durationInSeconds,    0,  );
  return {    durationInFrames: Math.ceil(totalDuration * 30),  };};

Setting a default outName

Set the default output filename based on props:

tsx
const calculateMetadata: CalculateMetadataFunction<Props> = async ({  props,}) => {  return {    defaultOutName: `video-${props.id}`, // .mp4 is added automatically  };};

Transforming props

Fetch data or transform props before rendering:

tsx
const calculateMetadata: CalculateMetadataFunction<Props> = async ({  props,  abortSignal,}) => {  const response = await fetch(props.dataUrl, { signal: abortSignal });  const data = await response.json();
  return {    props: {      ...props,      fetchedData: data,    },  };};

The abortSignal cancels stale requests when props change in the Studio.

Return value

All fields are optional. Returned values override the <Composition> props:

  • durationInFrames: Number of frames
  • width: Composition width in pixels
  • height: Composition height in pixels
  • fps: Frames per second
  • props: Transformed props passed to the component
  • defaultOutName: Default output filename
  • defaultCodec: Default codec for rendering