Chapter 342: <Player>

Core Idea

A component which can be rendered in a regular React App (for example: Next. JS, Vite.

Key Concepts

• API
• component or lazyComponent
• durationInFrames
• fps
• compositionWidth
• compositionHeight
• inputProps
• loop?

Code Examples

// @allowUmdGlobalAccess
// @filename: ./remotion/MyVideo.tsx
export const MyVideo = () => <></>;

// @filename: index.tsx

export const App: React.FC = () => {
  return <Player component={MyVideo} durationInFrames={120} compositionWidth={1920} compositionHeight={1080} fps={30} />;
};

• What it demonstrates: Usage pattern for <Player> from the official docs.

Key Takeaways

1. Understand api when working with <Player>.
2. Understand component or lazycomponent when working with <Player>.
3. Understand durationinframes when working with <Player>.
4. Understand fps when working with <Player>.
5. Understand compositionwidth when working with <Player>.

Connects To

• Clipper: related page in the Studio, Player & Editing section.
• Design Systems: related page in the Studio, Player & Editing section.
• Editor Starter: related page in the Studio, Player & Editing section.