Chapter 337: Examples for @remotion/player

Core Idea

Reference page for Examples for @remotion/player in the Remotion documentation.

Key Concepts

• Bare example
• Adding controls
• Loop video
• Changing size
• Adding autoplay
• Programmatically control the player
• Listen to events
• Interactive player

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 Examples for @remotion/player from the official docs.

Key Takeaways

1. Understand bare example when working with Examples for @remotion/player.
2. Understand adding controls when working with Examples for @remotion/player.
3. Understand loop video when working with Examples for @remotion/player.
4. Understand changing size when working with Examples for @remotion/player.
5. Understand adding autoplay when working with Examples for @remotion/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.