Web: Bradmax player example

Cloud DRM can be integrated with all major video players available on the market. Bradmax Player is an HTML5 web video player, which can display most popular video formats without needing to install any external libraries or plugins on the end user computer.

Example for Widevine, PlayReady and FairPlay

HTML/JavaScript example:

<script src="YOUR-PLAYER-LOCATION"></script>
<div style="width: 890px; height: 500px; background: black" id="player"></div>
<script type="text/javascript">
  function appendTokenToUrl(url, token) {
    const urlObject = new URL(url);
    urlObject.searchParams.set("usertoken", token);

    return urlObject.toString();
  }

  const USER_TOKEN = "CLOUD-DRM-TOKEN";

  const fairplayDrmConfigUrl = appendTokenToUrl(
    "<YOUR-FAIRPLAY-LICENSE-ACQUISITION-URL>",
    USER_TOKEN
  );

  const fairplayCertUrl = "<YOUR-FAIRPLAY-CERTIFICATE-URL>";

  var playerConfig = {
    dataProvider: {
      skin: { theme: "disco" },
      source: [
        {
          url: "<YOUR-PROTECTED-DASH-URL>",
          drm: {
            provider: "default",
            playready: {
              laUrl: appendTokenToUrl(
                "<YOUR-PLAYREADY-LICENSE-ACQUISITION-URL>",
                USER_TOKEN
              ),
            },
            widevine: {
              laUrl: appendTokenToUrl(
                "<YOUR-WIDEVINE-LICENSE-ACQUISITION-URL>",
                USER_TOKEN
              ),
            },
          },
        },
        {
          url: "<YOUR-PROTECTED-HLS-URL>",
          drm: { provider: "viaEvent" },
        },
      ],
    },
  };

  function onFairplayDrmNeeded(event) {
    const keyMessage = event.data.keyMessage;
    const keySession = event.data.keySession;
    const params = new URLSearchParams(
      event.data.keySession.keyPath.split("?")[1]
    );
    const licenseServerUrl = new URL(fairplayDrmConfigUrl);
    params.forEach((value, key) => {
      licenseServerUrl.searchParams.set(key, value);
    });

    var licReq = new XMLHttpRequest();
    licReq.open("POST", licenseServerUrl.toString(), true);
    licReq.responseType = "arraybuffer";
    licReq.onload = function () {
      if (licReq.status === 200) {
        const license = licReq.response;
        jsapi.drm.provideFairplayLicense(keyMessage, license);
      } else {
        const errorMessage = licReq.response;
        jsapi.drm.provideFairplayLicense(keyMessage, null, errorMessage);
      }
    };
    licReq.onerror = licReq.onload;
    licReq.send(keyMessage);
  }

  function onFairplayCertNeeded(event) {
    var certReq = new XMLHttpRequest();
    certReq.open("GET", fairplayCertUrl, true);
    certReq.responseType = "arraybuffer";
    certReq.onload = function () {
      if (certReq.status === 200) {
        const cert = certReq.response;
        jsapi.drm.provideFairplayCertificate(cert);
      } else {
        const errorMessage = licReq.response;
        jsapi.drm.provideFairplayLicense(null, errorMessage);
      }
    };
    certReq.onerror = certReq.onload;
    certReq.send();
  }

  var element = document.getElementById("player");
  var player = window.bradmax.player.create(element, playerConfig);
  var jsapi = player.modules.JavascriptApi;

  jsapi.add(
    "DrmLicenseProviderEvent.extRequestFairplayCertificate",
    onFairplayCertNeeded
  );

  jsapi.add(
    "DrmLicenseProviderEvent.extRequestFairplayLicense",
    onFairplayDrmNeeded
  );
</script>

Please replace the following placeholders in the code:

• YOUR-PLAYER-LOCATION: The path to your Bradmax Player library files (from the Bradmax panel).
• 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.