Providers

Remotion

This provider enables playing videos programmatically built with React.

Remotion enables creating complex animations and videos programatically using React. You can use this provider to embed, preview, and play dynamic React components that are using Remotion. You can also provide the rendered MP4 directly to the player in production (see the video provider).

INFO

Refer to the Player component if you’re looking for props, methods, and events.

Source

Options

The src player property as shown above accepts the same video options as Remotion Player:

Name	Type	Default
`src`	`React.ReactNode`	`-`
`type`	`string`	`-`
`compositionWidth`	`number`	`1920`
`compositionHeight`	`number`	`1080`
`fps`	`number`	`30`
`durationInFrames`	`number`	`-`
`initialFrame`	`number`	`0`
`inFrame`	`number \| null`	`0`
`outFrame`	`number \| null`	`durationInFrames`
`numberOfSharedAudioTags`	`number \| undefined`	`5`
`inputProps`	`RemotionInputProps`	`{}`
`renderLoading`	`RemotionLoadingRenderer`	`undefined`
`errorFallback`	`RemotionErrorRenderer`	`undefined`
`onError`	`(error: Error) => void`	`undefined`

Components

The following components are available when using the Remotion provider. See the respective links for how to use and style them.

Remotion

Source

Options

`src`

`type`

`compositionWidth`

`compositionHeight`

`fps`

`durationInFrames`

`initialFrame`

`inFrame`

`outFrame`

`numberOfSharedAudioTags`

`inputProps`

`renderLoading`

`errorFallback`

`onError`

Components