Skip to main content

Quickplay Player for React

Quickplay Player for React gives you a production-ready video player for web apps with built-in platform authentication, content authorization, DRM, analytics hooks, and advanced playback controls. This guide gives you the fastest path to integrate QuickplayPlayer and start playback.

What you get​

@quickplay/player-react bundles three layers so you don't have to integrate them separately: platform services for authentication, authorization, and analytics; advertising support for major ad insertion frameworks; and a full-featured playback component with DRM, live, and accessibility support.

  • Platform services
    • Remote configuration via a single configUrl
    • Anonymous and OAuth 2.0 token management
    • Content authorization and DRM license handling
    • Persistent device identity across sessions
    • Concurrency control and geo-blackouts
    • Analytics: Quickplay Analytics, NewRelic, Datazoom, Conviva, NPAW/Youbora
  • Advertising
    • Google IMA CSAI, SSAI
    • Brightcove SSAI
    • AWS MediaTailor
  • Playback
    • DRM and clear stream playback (HLS and DASH)
    • Low-latency playback via Janus WebRTC
    • Audio track, quality, playback speed, and caption selection
    • Picture-in-Picture and Chromecast
    • Keyboard navigation and ARIA-compliant controls

Integration path​

This guide uses a single integration path with QuickplayPlayer. It keeps setup straightforward by handling platform authorization, content authorization, DRM license requests, and playback in one flow.

If you already have your own authorization stack and fully resolved playback URLs, you can use ContentPlayer later. For that path, see Advanced usage.

Install the package​

Before you install, configure npm to authenticate against the Quickplay registry.

Configure npm registry​

You can configure the registry with npm commands:

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

You can also configure ~/.npmrc directly:

@quickplay:registry=https://firstlight.jfrog.io/artifactory/api/npm/javascript-sdk-local/
//firstlight.jfrog.io/artifactory/api/npm/javascript-sdk-local/:_password=<BASE64_PASSWORD>
//firstlight.jfrog.io/artifactory/api/npm/javascript-sdk-local/:username=<USERNAME>
//firstlight.jfrog.io/artifactory/api/npm/javascript-sdk-local/:email=your.email@example.com
//firstlight.jfrog.io/artifactory/api/npm/javascript-sdk-local/:always-auth=true

Note: The _password value must be your API key encoded in Base64.

Install​

After registry setup, install the package:

npm install @quickplay/player-react

All fl-* peer dependencies are required except the following, which you only need if you use the corresponding ad provider:

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

Quick start​

QuickplayPlayer requires a QuickplayPlatformProvider ancestor. Set up the provider once, then render QuickplayPlayer inside it.

  1. Wrap your player with QuickplayPlatformProvider and render QuickplayPlayer:
import { QuickplayPlatformProvider, QuickplayPlayer } from '@quickplay/player-react';

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

  return (
    <QuickplayPlatformProvider configUrl="https://config-service.api.example.com/remote/config">
      <QuickplayPlayer source={source} autoPlay controls />
    </QuickplayPlatformProvider>
  );
}

The player handles content authorization, DRM license requests, and playback automatically. No additional configuration is needed.

If you need a bring-your-own-URL playback model, see Advanced usage for ContentPlayer examples.

Next steps​

Use the React player guides to go deeper into setup and customization.