@moviie/player-react

Native React web player for the Moviie platform. Renders playback directly in your page DOM (no iframe) on top of the same engine the official embed uses, with the same features and an API that mirrors @moviie/player-expo and the Player JS API.

Full documentation: docs.moviie.ai.

Prerequisites

You need a Moviie account and a publishable API key (mvi_pub_*).

1. Create an account at app.moviie.ai/signin.
2. Go to Organization Settings → API Keys and create a Publishable key.
3. Copy the key: it starts with mvi_pub_.

Never use a secret key (mvi_sec_*) in a client app. The playback API rejects it.

Install

pnpm add @moviie/player-react

react and react-dom (>=19) are peer dependencies. The package brings its own playback engine.

Import the stylesheet once at the root of your app (it pulls in the design tokens and the player chrome):

import '@moviie/player-react/styles.css'

Features

Everything the iframe embed does, rendered natively in your DOM:

• HLS playback (private videos included), poster, captions, chapters, branded chrome
• Telemetry + Meta pixels, access gating with typed unavailable surfaces
• The full AI menu: search, summary, ebook, quiz, mind map, tutor chat
• Variants (the condensed "Express" version), timed CTAs, the social-DRM watermark
• SSR/Next.js App Router safe; overlay code is lazy-loaded so the core stays lean

Quick start

'use client'
import { MoviieProvider, MoviieVideo, useMoviiePlayer } from '@moviie/player-react'

function Player({ embedId }: { embedId: string }) {
  const moviie = useMoviiePlayer({ embedId })
  return <MoviieVideo {...moviie} aspectRatio={16 / 9} />
}

export function Watch({ embedId }: { embedId: string }) {
  return (
    <MoviieProvider publishableKey={process.env.NEXT_PUBLIC_MOVIIE_PUBLISHABLE_KEY!}>
      <Player embedId={embedId} />
    </MoviieProvider>
  )
}

Imperative control and events

Attach a ref (or use onReady) to get the player handle, and subscribe to contract events. The method, event and property names are the same contract as the Player JS API and the Expo player.

import { useRef } from 'react'
import {
  MoviieVideo,
  useMoviieEvent,
  useMoviiePlayer,
  PLAYER_API_EVENTS,
  type MoviiePlayerHandle,
} from '@moviie/player-react'

function Player({ embedId }: { embedId: string }) {
  const ref = useRef<MoviiePlayerHandle>(null)
  const moviie = useMoviiePlayer({ embedId })

  useMoviieEvent(ref.current, PLAYER_API_EVENTS.PLAY, () => console.log('playing'))

  return (
    <>
      <MoviieVideo ref={ref} {...moviie} />
      <button onClick={() => ref.current?.seek(30)}>Skip to 0:30</button>
    </>
  )
}

Documentation

• Overview + quick start
• Configuration & theming
• API reference (provider, hooks, handle)
• Error handling

Looking for the React Native / Expo player?

For mobile apps, use @moviie/player-expo.

License

MIT: see LICENSE. Copyright (c) 2026 Moviie.