Web: HISPlayer example

Cloud DRM can be integrated with all major video players and SDKs available in the market. HISPlayer provides a media player for browsers, smart TVs operating on Tizen, WebOS and Hisense, consoles such as Xbox, PlayStation 4 and PlayStation 5, and also supports Unity and Unreal Engine SDKs on Android and Meta Quest, offering a unique combination of VR, 8K resolution, and DRM protection. This player provides comprehensive DRM support for protecting your content across multiple platforms and browsers.

If you are interested in integrating HISPlayer with Cloud DRM, you can find a detailed tutorial in the HISPlayer documentation.

Example for Widevine, PlayReady and FairPlay

HTML/JavaScript example:

<script src="https://downloads.hisplayer.com/html5/2.1.1/hisplayer.js"></script>
<div id="player" style="position: relative; width: 640px; height: 360px"></div>
<script>
  async function checkDRM() {
    if (typeof navigator.requestMediaKeySystemAccess === "function") {
      const config = [
        {
          initDataTypes: ["cenc"],
          audioCapabilities: [
            { contentType: 'audio/mp4;codecs="mp4a.40.2"' },
          ],
          videoCapabilities: [
            { contentType: 'video/mp4;codecs="avc1.42E01E"' },
          ],
        },
      ];

      const drmSystems = [
        { keySystem: "com.widevine.alpha", name: "Widevine" },
        { keySystem: "com.microsoft.playready", name: "PlayReady" },
        { keySystem: "com.apple.fps.1_0", name: "FairPlay" },
      ];

      const supportedDRMs = [];

      return Promise.all(
        drmSystems.map((keySystem) =>
          navigator
            .requestMediaKeySystemAccess(keySystem.keySystem, config)
            .then(() => supportedDRMs.push(keySystem.name))
            .catch((error) => { })
        )
      ).then(() => supportedDRMs);
    } else {
      return Promise.reject("EME API not supported in this browser.");
    }
  }

  async function prepareConfig() {
    const supportedDrmSystems = await checkDRM();
    const config = {
      licenseKey: "<HISPLAYER_LICENSE_KEY>",
      div: document.getElementById("player"),
      mutedAtStart: true,
      autoplay: true,
      ui: { enabled: true },
    };

    const headers = [
      {
        name: "X-Drm-UserToken",
        value: "<USER_TOKEN>",
      },
    ];

    if (supportedDrmSystems.includes("FairPlay")) {
      (config.src = "<HLS_MANIFEST_URL>"),
        (config.drm = [
          {
            type: "com.apple.fps",
            licenseServer: "<FAIRPLAY_LICENSE_SERVER_URL>",
            certificateUri: "<FAIRPLAY_CERTIFICATE_URL>",
            headers,
            provider: "clouddrm",
          },
        ]);
    } else {
      (config.src = "<DASH_MANIFEST_URL>"),
        (config.drm = [
          {
            type: "com.widevine.alpha",
            licenseServer: "<WIDEVINE_LICENSE_SERVER_URL>",
            headers,
          },
          {
            type: "com.microsoft.playready",
            licenseServer: "<PLAYREADY_LICENSE_SERVER_URL>",
            headers,
          },
        ]);
    }

    return config;
  }

  async function initApp() {
    const config = await prepareConfig();
    const player = new hisplayer.HisPlayer();
    const eventHandler = function (error) {
      console.error(error);
    };
    player.addEventListener(player.HisPlayerEvent.ERROR, eventHandler);
    player.init(config);
  }

  document.addEventListener("DOMContentLoaded", initApp);
</script>

Please replace the following placeholders in the code:

• HISPLAYER_LICENSE_KEY: Your HISPlayer license key (from the HISPlayer portal).
• USER_TOKEN: JWT (JSON Web Token) for license acquisition, see Token for more details.
• HLS_MANIFEST_URL: The base URL to your protected HLS (.M3U8) stream for FairPlay playback.
• DASH_MANIFEST_URL: The base URL to your protected DASH (.MPD) stream for Widevine and PlayReady playback.
• WIDEVINE_LICENSE_SERVER_URL: License acquisition URL for Widevine DRM, found in Cloud Video Kit DRM configuration.
• PLAYREADY_LICENSE_SERVER_URL: License acquisition URL for PlayReady DRM, found in Cloud Video Kit DRM configuration.
• FAIRPLAY_LICENSE_SERVER_URL: License acquisition URL for FairPlay DRM, found in Cloud Video Kit DRM configuration.
• FAIRPLAY_CERTIFICATE_URL: Certificate URL for FairPlay DRM, found in Cloud Video Kit DRM configuration.