Skip to main content

Integrate Quickplay Player in your React app

This guide walks you through installing @quickplay/player-react, wiring the platform provider, and rendering either QuickplayPlayer or ContentPlayer. Use this as your implementation checklist for a new integration.

Step 1: Install and authenticate​

You must authenticate npm to the Quickplay registry before package install.

  1. Configure the scope registry and login:

    npm config set @quickplay:registry https://firstlight.jfrog.io/artifactory/api/npm/javascript-sdk-local/
    npm login --scope=@quickplay

  2. Install the package:

    npm install @quickplay/player-react

  3. Optional: Install ad-provider peers only if you use those providers.

    • Install fl-ads-mediatailor and fl-pal for MediaTailor SSAI.
    • Install fl-ads-brightcove for Brightcove SSAI.

Step 2: Add QuickplayPlatformProvider​

For Quickplay-hosted content, place QuickplayPlatformProvider high in your component tree so every player instance can access platform services.

import { QuickplayPlatformProvider } from '@quickplay/player-react';

export function AppProviders({ children }: { children: React.ReactNode }) {
  return (
    <QuickplayPlatformProvider configUrl="https://config-service.api.example.com/remote/config">
      {children}
    </QuickplayPlatformProvider>
  );
}

The provider reads configUrl to discover platform endpoints and creates an anonymous token manager automatically. See Platform and authentication for analytics, custom headers, and custom token flows.

Step 3: Render QuickplayPlayer​

Use QuickplayPlayer when the source is a platform asset reference and you want the player to manage authorization and DRM.

import { QuickplayPlayer } from '@quickplay/player-react';

export function QuickplayVideo() {
  const source = {
    mediaID: 'your-content-id',
    catalogType: 'clip',
    mediaType: 'hls',
    drmScheme: 'none',
    consumptionType: 'vod',
  };

  return (
    <QuickplayPlayer
      source={source}
      title="Video title"
      subtitle="Published 3 hours ago"
      autoPlay
      controls
    />
  );
}

Step 4: Render ContentPlayer when needed​

Use ContentPlayer for clear streams, external authorization flows, or when you already have resolved playback URLs.

import { ContentPlayer, type ContentSource } from '@quickplay/player-react';

export function ExternalVideo() {
  const source: ContentSource = {
    contentUrl: 'https://cdn.example.com/stream.m3u8',
    drmLicenseUrl: '',
    mediaType: 'hls',
    drmScheme: 'none',
  };

  return <ContentPlayer source={source} title="My video" autoPlay controls />;
}

Step 5: Handle loading and error states​

When you use QuickplayPlatformProvider, read provider state with useQuickplayPlatform so your app can render clear startup and failure states.

import { useQuickplayPlatform } from '@quickplay/player-react';

export function PlatformGate({ children }: { children: React.ReactNode }) {
  const { isLoading, error } = useQuickplayPlatform();

  if (isLoading) {
    return <div>Initializing player platform...</div>;
  }

  if (error) {
    return (
      <div>
        <h1>Platform setup failed</h1>
        <p>{error.message}</p>
      </div>
    );
  }

  return <>{children}</>;
}

Next steps​

After basic integration works, continue with focused topics.