React web player
A real React player that renders Moviie playback directly in the DOM, no iframe.
The @moviie/player-react package is a native React web player. It renders
playback directly in your page DOM (no iframe) on top of the same Vidstack
engine the iframe embed uses, so you get full feature parity with a real
component you can style, ref, and compose.
Its public API mirrors @moviie/player-expo and the window.Moviie
JavaScript Player API, so knowledge transfers across all three
surfaces: the same provider, hooks, component, methods, events, and properties.
What you get
- A
<MoviieVideo>component plus theuseMoviiePlayerhook: HLS playback, default controls, captions, chapters, audio tracks, variants, CTAs, telemetry, and access gating, all honoring the embed's dashboard configuration. - The AI menu (search, summary, quiz, mind map, ebook, tutor) and the social-DRM watermark for private videos, out of the box.
- An imperative
MoviiePlayerHandle(viaref) with the same method, event, and property vocabulary as the JavaScript Player API. - First-class React 19 / Next.js App Router support: a client component that hydrates cleanly, with AI overlays loaded on demand.
How it differs
- No iframe. The rendered output contains no iframe: the video lives in your page DOM, so it inherits your layout, your CSS, and your DevTools.
- Same contract as the iframe embed and the Expo player. Methods, events,
and properties come from
@moviie/player-types: see the shared Reference. - For mobile apps, use
@moviie/player-expo(React Native / Expo) instead.
Next steps
Quick start
Minimal wiring in a React app.
Installation
Install the package and import the stylesheet.
Configuration
Provider props, presentation overrides, theming, and SSR notes.
API reference
Provider, hooks, component, error boundary, and the imperative handle.
Error handling
Typed errors, unavailable surfaces, and the error boundary.
Recipes
Event tracking, themed controls, and remembering position.
FAQ
Iframe, custom controls, SSR, and how it compares.