@genie-player/react

Add multilingual captions to video you host with Genie Player's React components and read-only browser hooks.

• Genie Player website
• Help and support

Install

npm install @genie-player/react

Quick start

1. Open Genie Player, upload your video, review the generated captions, and complete the review.
2. From Processing → Links, copy the completed job ID.
3. From Dashboard → API keys, create a publishable React client key and allow the exact origin where your player runs.
4. Host the matching video on your own CDN or video platform, then pass its URL and the completed job ID to GeniePlayer.

import { GeniePlayer, GenieProvider } from "@genie-player/react";
import "@genie-player/react/styles.css";

<GenieProvider
  clientKey={import.meta.env.VITE_GENIE_PLAYER_CLIENT_KEY}
  theme={{
    colors: {
      accent: "#7c3aed",
      surface: "#111827",
      text: "#f9fafb",
      muted: "#94a3b8",
      playerBackground: "#020617",
    },
    radius: "18px",
    fontFamily: "Inter, sans-serif",
  }}
>
  <GeniePlayer
    jobId="translation-job-id"
    src="https://customer-cdn.example/video.mp4"
  />
</GenieProvider>

jobId identifies captions that have completed dashboard review. src is the matching video URL that you host; a WebVTT URL or media ID cannot replace the job ID.

The provider merges partial theme objects with defaultGenieTheme and applies the resolved values to every prebuilt component. Use useGenieTheme() to read the same resolved theme in custom interfaces.

Create the publishable client key in Dashboard → API keys and configure exact allowed origins, including protocol and development port. The SDK exchanges the key and reviewed job ID for a ten-minute, read-only token bound to that job and origin. It caches the token, refreshes it when needed, and authorizes the hosted WebVTT tracks used by native <track> elements.

The SDK retains an argument-free getClientToken callback for the future trusted-backend flow, but server API key creation is not available at the initial public beta. Launch integrations should use clientKey. Never place a server credential in browser code; clientKey and getClientToken are mutually exclusive.

Pass your own video URL to GeniePlayer; Genie temporarily retains the uploaded source for processing and review, deletes it when review is completed, and hosts the approved WebVTT tracks.

GeniePlayer sets the native video element to crossOrigin="anonymous" by default so browsers can load Genie-hosted WebVTT tracks from a separate origin. Configure your video CDN to return an Access-Control-Allow-Origin header that permits your player origin (or * for public media). Override crossOrigin only when your video host and caption delivery are configured for the same alternative CORS mode.

The package defaults to https://api.genieplayer.com.