1---
2name: calculate-metadata
3description: Dynamically set composition duration, dimensions, and props
4metadata:
5  tags: calculateMetadata, duration, dimensions, props, dynamic
6---
7 
8# Using calculateMetadata
9 
10Use `calculateMetadata` on a `<Composition>` to dynamically set duration, dimensions, and transform props before rendering.
11 
12```tsx
13<Composition
14  id="MyComp"
15  component={MyComponent}
16  durationInFrames={300}
17  fps={30}
18  width={1920}
19  height={1080}
20  defaultProps={{ videoSrc: "https://remotion.media/video.mp4" }}
21  calculateMetadata={calculateMetadata}
22/>
23```
24 
25## Setting duration based on a video
26 
27Use the [`getVideoDuration`](./get-video-duration.md) and [`getVideoDimensions`](./get-video-dimensions.md) skills to get the video duration and dimensions:
28 
29```tsx
30import { CalculateMetadataFunction } from "remotion";
31import { getVideoDuration } from "./get-video-duration";
32 
33const calculateMetadata: CalculateMetadataFunction<Props> = async ({
34  props,
35}) => {
36  const durationInSeconds = await getVideoDuration(props.videoSrc);
37 
38  return {
39    durationInFrames: Math.ceil(durationInSeconds * 30),
40  };
41};
42```
43 
44## Matching dimensions of a video
45 
46Use the [`getVideoDimensions`](./get-video-dimensions.md) skill to get the video dimensions:
47 
48```tsx
49import { CalculateMetadataFunction } from "remotion";
50import { getVideoDuration } from "./get-video-duration";
51import { getVideoDimensions } from "./get-video-dimensions";
52 
53const calculateMetadata: CalculateMetadataFunction<Props> = async ({
54  props,
55}) => {
56  const dimensions = await getVideoDimensions(props.videoSrc);
57 
58  return {
59    width: dimensions.width,
60    height: dimensions.height,
61  };
62};
63```
64 
65## Setting duration based on multiple videos
66 
67```tsx
68const calculateMetadata: CalculateMetadataFunction<Props> = async ({
69  props,
70}) => {
71  const metadataPromises = props.videos.map((video) =>
72    getVideoDuration(video.src),
73  );
74  const allMetadata = await Promise.all(metadataPromises);
75 
76  const totalDuration = allMetadata.reduce(
77    (sum, durationInSeconds) => sum + durationInSeconds,
78    0,
79  );
80 
81  return {
82    durationInFrames: Math.ceil(totalDuration * 30),
83  };
84};
85```
86 
87## Setting a default outName
88 
89Set the default output filename based on props:
90 
91```tsx
92const calculateMetadata: CalculateMetadataFunction<Props> = async ({
93  props,
94}) => {
95  return {
96    defaultOutName: `video-${props.id}.mp4`,
97  };
98};
99```
100 
101## Transforming props
102 
103Fetch data or transform props before rendering:
104 
105```tsx
106const calculateMetadata: CalculateMetadataFunction<Props> = async ({
107  props,
108  abortSignal,
109}) => {
110  const response = await fetch(props.dataUrl, { signal: abortSignal });
111  const data = await response.json();
112 
113  return {
114    props: {
115      ...props,
116      fetchedData: data,
117    },
118  };
119};
120```
121 
122The `abortSignal` cancels stale requests when props change in the Studio.
123 
124## Return value
125 
126All fields are optional. Returned values override the `<Composition>` props:
127 
128- `durationInFrames`: Number of frames
129- `width`: Composition width in pixels
130- `height`: Composition height in pixels
131- `fps`: Frames per second
132- `props`: Transformed props passed to the component
133- `defaultOutName`: Default output filename
134- `defaultCodec`: Default codec for rendering
135