FAQ

Does it use an iframe?

No. @moviie/player-react renders the video directly in your page DOM. The rendered output contains no iframe: the player is a real React component on the same Vidstack engine the iframe embed uses. That means it inherits your layout and CSS, and you can inspect it with your own DevTools.

Can I use my own controls?

Yes. Two ways, which you can combine:

• Toggle the built-in chrome with the controls prop (per-control flags like showChapters, showSpeed, showFullscreen). See Configuration.
• Drive playback imperatively with the MoviiePlayerHandle: get it from onReady or a ref, then call play(), pause(), seek(), setVolume(), and so on, and listen for events with useMoviieEvent or onEvent. This lets you build a fully custom control bar around the player.

Does it work with Next.js App Router and SSR?

Yes. The player is a client component: mark the file that renders <MoviieProvider> / <MoviieVideo> with 'use client' and it hydrates on the client with no mismatch. The default in-memory viewer-token store is SSR-safe, and LocalStorageViewerTokenStore degrades to a no-op when there is no window. See Configuration: SSR and Next.js App Router.

How is it different from the iframe embed?

The iframe embed is a self-contained <iframe> you drop on any page and control through the window.Moviie Player API. @moviie/player-react is a native React component with the same features and the same contract (methods, events, properties), but no iframe boundary: it composes into your React tree, takes props and refs, and shares your bundle and styles. Use the iframe for plain HTML or non-React stacks; use the React player when you are already in React and want first-class integration.

How is it different from the Expo player?

@moviie/player-expo targets React Native / Expo (native mobile apps), where playback runs on expo-video. @moviie/player-react targets the web and runs on Vidstack in the browser DOM. The public API is intentionally mirrored, the provider, hooks, component, and the method/event/property vocabulary match, so knowledge transfers between them. Pick the package that matches your platform.

Where is the full method / event / property reference?

The contract is shared across all three surfaces. See the Reference for every method, event, and property, and the API reference for the React-specific provider, hooks, and component props.