Skip to main content

useMediaInTimeline()

available from v4.0.356

This hook allows you to register media in the Remotion Studio timeline without needing a direct reference to the media element.

This is particularly useful when creating custom media components that need to appear in the timeline but don't directly manage the HTML media element.

Example​

tsx
import React from 'react';
import {useMediaInTimeline} from 'remotion';
 
export const MyCustomAudio: React.FC<{src: string}> = ({src}) => {
	useMediaInTimeline({
		volume: 1,
		mediaVolume: 1,
		src,
		mediaType: 'audio',
		playbackRate: 1,
		displayName: 'My Custom Audio',
		id: 'my-custom-audio',
		stack: null,
		showInTimeline: true,
		premountDisplay: null,
		postmountDisplay: null,
	});
 
	return null;
};

API​

volume​

The volume of the media, either as a number between 0 and 1, or as a function that returns a number based on the frame.

mediaVolume​

The intrinsic volume of the media element (typically 1).

src​

The source URL of the media file.

mediaType​

Either "audio" or "video".

playbackRate​

The playback rate of the media (default: 1).

displayName​

The name to display in the timeline. If null, the filename will be used.

id​

A unique identifier for this media instance.

stack​

Optional stack trace for debugging purposes.

showInTimeline​

Whether to show this media in the Remotion Studio timeline.

premountDisplay​

Internal prop for premounting (typically null).

postmountDisplay​

Internal prop for postmounting (typically null).

See also​