Skip to main content

Web: Dolby OptiView player example

Cloud DRM can be integrated with all major video players available in the market. Dolby OptiView player (formerly THEOplayer) is a recommended choice for secure and high-quality video playback. This player includes a Cloud Video Kit integration module, making DRM-protected content playback straightforward.

If you are interested in integrating the Dolby OptiView player with Cloud DRM, you can find a detailed step-by-step guide in the Dolby Player documentation. By following the guide, you will be able to seamlessly integrate Cloud DRM with the Dolby OptiView player, improving the security and quality of your video content.

Example for Widevine, PlayReady and FairPlay​

HTML/JavaScript example:
<script>
  var element = document.querySelector(".theoplayer-container");
  var player = new THEOplayer.Player(element, {
    libraryLocation: "SDK-LIBRARY-LOCATION",
    license: "YOUR-LICENSE-STRING",
  });

  const drmConfiguration = {
    integration: "clouddrm",
    integrationParameters: {
      token: "CLOUD-DRM-TOKEN",
    },
    preferredKeySystems: ["playready", "widevine", "fairplay"],
    // copy license acquisition URL and certificate URL from DRM console settings page: https://console.videokit.cloud/dashboard/drm/configuration
    playready: {
      licenseAcquisitionURL: "<YOUR-PLAYREADY-LICENSE-ACQUISITION-URL>",
    },
    widevine: {
      licenseAcquisitionURL: "<YOUR-WIDEVINE-LICENSE-ACQUISITION-URL>",
    },
    fairplay: {
      licenseAcquisitionURL: "<YOUR-FAIRPLAY-LICENSE-ACQUISITION-URL>",
      certificateURL: "<YOUR-FAIRPLAY-CERTIFICATE-URL>",
    },
  };

  player.source = {
    sources: [
      {
        src: "https://<YOUR-PROTECTED-DASH-URL>/dash/index.mpd",
        type: "application/dash+xml",
        contentProtection: drmConfiguration,
      },
      {
        src: "https://<YOUR-PROTECTED-HLS-URL>/hls/index.m3u8",
        type: "application/x-mpegURL",
        contentProtection: drmConfiguration,
      },
    ],
  };
</script>

Please replace the following placeholders in the code:

  • SDK-LIBRARY-LOCATION: The path to your Dolby Player SDK library files (from the Dolby Player portal).
  • YOUR-LICENSE-STRING: Your Dolby Player license key (from the Dolby Player portal).
  • CLOUD-DRM-TOKEN: JWT token for license acquisition, see Token for more details.
  • YOUR-PLAYREADY-LICENSE-ACQUISITION-URL: License acquisition URL for PlayReady DRM, found in Cloud Video Kit DRM configuration.
  • YOUR-WIDEVINE-LICENSE-ACQUISITION-URL: License acquisition URL for Widevine DRM, found in Cloud Video Kit DRM configuration.
  • YOUR-FAIRPLAY-LICENSE-ACQUISITION-URL: License acquisition URL for FairPlay DRM, found in Cloud Video Kit DRM configuration.
  • YOUR-FAIRPLAY-CERTIFICATE-URL: Certificate URL for FairPlay DRM, found in Cloud Video Kit DRM configuration.
  • YOUR-PROTECTED-DASH-URL: The base URL to your protected DASH (.MPD) stream.
  • YOUR-PROTECTED-HLS-URL: The base URL to your protected HLS (.M3U8) stream.