How to use the video player

Overview

The VideoJS DRM Player demo wraps the VideoJSDRMPlayer package (Video.js + Shaka Player) with a configuration form and a live JSON preview of the options passed to the player — including drmConfig when DRM is enabled.

Prerequisites:

• PHP backend running (default: http://localhost:8000)
• For DRM playback: license delivery mode configured — see Token Authorization or Callback Authorization.
• A DRM-protected stream URL (e.g. from the CPIX Packager)

Using the VideoJS demo UI

1. Open Player Demos → View Demo on the VideoJS card, or go directly to videojs-demo.html.
2. In the right panel (Configuration Settings), enter a Video/Audio Source URL (HLS .m3u8 or DASH .mpd).
3. Adjust playback options (autoplay, loop, aspect ratio, poster, etc.) as needed.
4. To play DRM content, check Enable DRM. The License delivery authorization and DRM Configuration sections appear.
5. Click Load Video to initialize the player.
6. Use the Player Options panel (left side) to inspect or copy the full JSON configuration, including drmConfig.

Player options reference

Configuring drmConfig

When isDRM: true, the player expects a drmConfig object with entries for the target DRM system. Each entry has:

• url — license server URL
• licenseHeaders — HTTP headers sent with the license request
• certificateUrl — (FairPlay only) FPS certificate URL

Basic structure:

{
  "isDRM": true,
  "source": "https://your-server/packaged-video.ism/.m3u8",
  "drmConfig": {
    "widevine": {
      "url": "https://lic.staging.drmtoday.com/license-proxy-widevine/cenc/?specConform=true&assetId=CPIX-test",
      "licenseHeaders": {
        "x-dt-auth-token": "<jwt-token>"
      }
    }
  }
}

The demo builds drmConfig automatically from the form fields and the current license delivery method. You can also construct it manually when integrating the player in your own application.

TOKEN (Upfront) mode

When the organization's license delivery mode is TOKEN (DRMtoday UPFRONT):

1. The demo fetches the current mode from apis/license-delivery-authorization/status.php.
2. Only Asset ID is required in the DRM Configuration form (User ID, Session ID, and Merchant fields are hidden).
3. On Load Video, the demo calls apis/license-delivery-authorization/get-auth-token.php with { "assetId": "..." }.
4. The returned JWT is placed in licenseHeaders under x-dt-auth-token (or the header name returned by the API).

Example drmConfig for Widevine in TOKEN mode:

"drmConfig": {
  "widevine": {
    "url": "https://lic.staging.drmtoday.com/license-proxy-widevine/cenc/?specConform=true&assetId=CPIX-test",
    "licenseHeaders": {
      "x-dt-auth-token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6Ii4uLiJ9..."
    }
  }
}

Use the Switch to CALLBACK button in the License delivery authorization panel to change modes without leaving the demo (calls the set-method API).

CALLBACK mode

When the mode is CALLBACK, DRMtoday validates each license request by calling your backend callback URL. The demo sends custom data in the license header instead of a JWT.

Required form fields:

• User ID
• Session ID
• Merchant (Organization ID)
• Asset ID

Example drmConfig for Widevine in CALLBACK mode:

"drmConfig": {
  "widevine": {
    "url": "https://lic.staging.drmtoday.com/license-proxy-widevine/cenc/?specConform=true&assetId=CPIX-test",
    "licenseHeaders": {
      "x-dt-custom-data": "eyJ1c2VySWQiOiJyZW50YWwxIiwibWVyY2hhbnQiOiIuLi4iLCJzZXNzaW9uSWQiOiJwMCJ9"
    }
  }
}

The x-dt-custom-data value is a Base64-encoded JSON object: { userId, merchant, sessionId }.

DRM system URLs

Select the DRM type that matches your browser: Widevine for Chrome/Firefox, FairPlay for Safari, PlayReady for Edge (Windows).

Programmatic initialization

Minimal example without the demo form:

const player = new VideoJSDRMPlayer({
  containerId: "videojs-container",
  source: "https://your-server/packaged-video.ism/.m3u8",
  useShakaTech: true,
  isDRM: true,
  drmConfig: {
    widevine: {
      url: "https://lic.staging.drmtoday.com/license-proxy-widevine/cenc/?specConform=true&assetId=CPIX-test",
      licenseHeaders: {
        "x-dt-auth-token": authTokenFromYourBackend
      }
    }
  }
});

In production, fetch the auth token from your own backend — never embed shared secrets or long-lived tokens in client-side code. See also the VideoJS package documentation for build and integration details.