Remotion Player — Real-Time Video Playback in the Web Browser
Embed interactive video preview in React apps with @remotion/player
Remotion supports not only video rendering but also real-time playback in the browser.
Embed the <Player> component from the @remotion/player package in a React app to play Remotion Compositions directly on a web page. It provides standard video controls: play/pause, seek bar, fullscreen.
The most powerful feature is interactive preview. When users type text or change colors, updating the Player's inputProps instantly reflects in the video preview. This lets users verify results before rendering to MP4, making it the core UI for SaaS video editors.
Note: Player renders React in real-time in the browser, so complex components may experience frame drops. Final output should always use npx remotion render or Lambda.
How It Works
Install package with npm install @remotion/player
Embed in React app with <Player component={MyVideo} durationInFrames={150} fps={30} ... />
Reflect user input to video in real-time with inputProps={{ title: userInput, color: selectedColor }}
When satisfied with preview, generate final MP4 via renderMediaOnLambda() or server-side rendering
Pros
- ✓ Instant preview: verify changes in real-time without waiting for rendering
- ✓ Natural integration with React apps: connects with existing state management (Redux, Zustand etc.)
- ✓ Lighter than MP4: deliver dynamic content without video files
Cons
- ✗ Performance constraints: browser rendering may cause frame drops in complex scenes
- ✗ Audio autoplay restriction: browser autoplay policy prevents audio without user interaction