examples/basic-video-example.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Eluvio Test Page</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
        crossorigin="anonymous" />

  <!-- Bitmovin -->
  <script type="text/javascript" src="https://cdn.bitmovin.com/player/web/8/bitmovinplayer.js"></script>

  <!-- hls.js -->
  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>

  <!-- dashjs -->
  <script src="http://cdn.dashjs.org/v4.7.0/dash.all.min.js"></script>

  <!-- elv-client-js -->
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@eluvio/elv-client-js@latest/dist/ElvClient-min.js"></script>

  <style>
    /*start AlwaysShowUI*/
    .bmpui-ui-skin-modern .bmpui-ui-controlbar.bmpui-hidden {
      opacity: 1;
      visibility: visible;
    }

    body {
      overflow-y: scroll;
    }

    video {
      width: 100%;
      max-height: 100vh;
      background: black;
    }

    #error-message {
      padding: 20px 0 10px;
      text-align: center;
      color: #bb0000;
    }

    #error-message:empty {
      padding: 0;
    }

    #bitrate {
      width: 100%;
      text-align: center;
      font-weight: bold;
      height: 2rem;
    }

    .controls {
      margin: 0 0 50px;
    }

    .actions-container {
      display: flex;
      justify-content: center;
      align-items: flex-start;
    }

    .actions {
      flex-direction: column;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 5px 0;
      gap: 5px;
    }

    .actions button {
      background: white;
      border: 1px solid #1b73e8;
      color: #1b73e8;

      height: 30px;
      width: 200px;
      margin-right: 5px;
    }

    .actions button.active {
      background: #1b73e8;
      color: white;
    }

    .actions button:hover {
      background: #1b7bff;
      color: white;
    }

    .actions button:disabled {
      opacity: 0.5;
    }

    .input-container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 10px 0;
    }

    .input-container input,
    .input-container textarea,
    .input-container select {
      width: 75rem;
      padding: 0 0.5rem;
      height: 3rem;
      font-family: monospace;
      margin-bottom: 5px;
      border: 1px solid gray;
      background: white;
    }

    .input-container textarea {
      height: 20rem;
    }
  </style>
</head>

<body>
  <div id="error-message"></div>
  <div class="controls">
    <div id="bitrate"></div>
    <div class="actions-container">
      <div class="actions">
        <label>Player</label>
        <button id="select-hls-dash">hls.js / dashjs</button>
        <button id="select-bitmovin">Bitmovin</button>
      </div>

      <div class="actions">
        <label>Playout Method</label>
        <button id="load-hls">HLS Clear</button>
        <button id="load-hls-aes">HLS AES-128</button>
        <button id="load-hls-sample-aes">HLS Sample AES</button>
        <button id="load-hls-fairplay">HLS FairPlay</button>
        <button id="load-dash">Dash Clear</button>
        <button id="load-dash-wv">Dash Widevine</button>
      </div>
    </div>

    <div class="input-container">
      <select id="network">
        <option value="main">Network: Main</option>
        <option value="demov3">Network: Demo</option>
      </select>
      <input
        id="private-key"
        value=""
        placeholder="Private Key (leave blank for public content)">
      <input
        id="content-id"
        value=""
        placeholder="Object ID or Version Hash">
    </div>

    <div class="input-container">
      <label for="player-configuration">Player Configuration</label>
      <textarea id="player-configuration" placeholder="Player Configuration"></textarea>
    </div>

    <div class="actions">
      <button class="active" id="load-button">Load</button>
    </div>
  </div>

  <script type="module">
    let PROTOCOL = "hls";
    let DRM = "clear";
    let PLAYER_TYPE = "hls-dash";
    let player;

    const SetErrorMessage = (message) => {
      document.getElementById("error-message").innerText = message;
    };

    const PlayerConfiguration = () => {
      try {
        const configuration = document.getElementById("player-configuration").value.trim();

        if(!configuration) { return {}; }

        return JSON.parse(configuration);
      } catch(error) {
        SetErrorMessage("Unable to parse player configuration");
        return {};
      }
    };

    const UpdateButtons = () => {
      [
        "select-hls-dash",
        "select-bitmovin",
        "load-hls",
        "load-hls-aes",
        "load-hls-sample-aes",
        "load-hls-fairplay",
        "load-dash",
        "load-dash-wv"
      ].forEach(id => document.getElementById(id).className = "");

      if(PLAYER_TYPE === "bitmovin") {
        document.getElementById("select-bitmovin").className = "active";
      } else {
        document.getElementById("select-hls-dash").className = "active";
      }

      let activeOption;
      if(PROTOCOL === "hls") {
        if(DRM === "aes-128") {
          activeOption = "load-hls-aes";
        } else if(DRM === "sample-aes") {
          activeOption = "load-hls-sample-aes";
        } else if(DRM === "fairplay") {
          activeOption = "load-hls-fairplay";
        } else {
          activeOption = "load-hls";
        }
      } else {
        if(DRM === "widevine") {
          activeOption = "load-dash-wv";
        } else {
          activeOption = "load-dash";
        }
      }

      document.getElementById(activeOption).className = "active";
    };

    const DestroyPlayer = () => {
      // Stop current player
      if(player) {
        player.unload ? player.unload() : (player.destroy ? player.destroy() : player.reset());
      }

      // Remove video element
      const existingElement = document.getElementById("video-element");
      if(existingElement) {
        document.body.removeChild(existingElement);
      }

      document.getElementById("bitrate").innerHTML = "";
    };

    const CreatePlayerElement = () => {
      DestroyPlayer();

      let playerElement;
      if(PLAYER_TYPE === "bitmovin") {
        // Bitmovin is attached to a 'div' element, not a 'video' element
        playerElement = document.createElement("div");
      } else {
        playerElement = document.createElement("video");
        playerElement.controls = true;
        playerElement.autoplay = true;
      }

      playerElement.id = "video-element";

      document.body.prepend(playerElement);

      return playerElement
    };

    const LoadHlsJs = (playoutOptions) => {
      const playoutMethods = playoutOptions.hls.playoutMethods;

      let playoutInfo;
      if(DRM === "aes-128") {
        playoutInfo = playoutMethods["aes-128"];
      } else if(DRM === "sample-aes") {
        playoutInfo = playoutMethods["sample-aes"];
      } else {
        playoutInfo = playoutMethods.clear;
      }

      if(!playoutInfo) {
        SetErrorMessage(`HLS ${DRM} playout not supported for this content`);
        return;
      }

      const playerElement = CreatePlayerElement();

      // Use native player for Sample AES and FairPlay, or iOS
      if(PLAYER_TYPE !== "bitmovin" && (DRM === "sample-aes" || !Hls.isSupported())) {
        playerElement.src = playoutInfo.playoutUrl;
        return;
      } else if(DRM === "fairplay" && PLAYER_TYPE !== "bitmovin") {
        import("./FairPlay.js")
          .then(async ({InitializeFairPlayStream}) => {
            try {
              await InitializeFairPlayStream({playoutOptions, video: playerElement})
            } catch(error) {
              SetErrorMessage(error.toString());
            }
          });
        return;
      }

      // Move authorization token from URL params to authorization header.
      // This improves caching of video segments.
      const playoutUrl = new URL(playoutInfo.playoutUrl);
      const authorization = playoutUrl.searchParams.get("authorization");
      playoutUrl.searchParams.delete("authorization");

      const playerConfiguration = {
        ...PlayerConfiguration(),
        xhrSetup: xhr => {
          xhr.setRequestHeader("Authorization", `Bearer ${authorization}`);

          return xhr;
        }
      }

      // Load content and apply specified settings
      player = new Hls(playerConfiguration);
      player.loadSource(playoutUrl.toString());
      player.attachMedia(playerElement);


      // Register listener to retrieve bitrate for display
      player.on(Hls.Events.LEVEL_SWITCHED, () => {
        const currentLevel = player.levels[player.currentLevel];

        document.getElementById("bitrate").innerHTML = `${currentLevel.attrs.RESOLUTION} | ${currentLevel.bitrate / 1000 / 1000} Mbps`;
      });
    };

    const LoadDash = (playoutOptions) => {
      const playoutMethods = playoutOptions.dash.playoutMethods;

      // Determine playout URL and license server
      let playoutInfo, licenseServer;
      if(DRM === "widevine") {
        playoutInfo = playoutMethods.widevine;

        if(playoutInfo) {
          licenseServer = playoutMethods.widevine.drms.widevine.licenseServers[0];
        }
      } else {
        // Play clear
        playoutInfo = playoutMethods.clear;
      }

      if(!playoutInfo) {
        SetErrorMessage(`Dash ${DRM} playout not supported for this content`);
        return;
      }

      // Initialize dash player
      const playerElement = CreatePlayerElement();
      player = dashjs.MediaPlayer().create();


      // Move authorization token from URL params to authorization header.
      // This improves caching of video segments.
      const playoutUrl = new URL(playoutInfo.playoutUrl);
      const authorization = playoutUrl.searchParams.get("authorization");
      playoutUrl.searchParams.delete("authorization");

      player.extend("RequestModifier", function () {
        return {
          modifyRequestHeader: xhr => {
            xhr.setRequestHeader("Authorization", `Bearer ${authorization}`);

            return xhr;
          },
          modifyRequestURL: url => url
        };
      });

      // Specify widevine license server
      if(DRM === "widevine") {
        player.setProtectionData({
          "com.widevine.alpha": {
            "serverURL": licenseServer
          }
        });
      }

      // Load content and apply specified settings
      player.initialize(playerElement, playoutUrl.toString());
      player.updateSettings(PlayerConfiguration());


      // Register listener to retrieve bitrate for display
      player.on(dashjs.MediaPlayer.events.QUALITY_CHANGE_RENDERED, () => {
        const currentLevel = player.getBitrateInfoListFor("video")[player.getQualityFor("video")];

        document.getElementById("bitrate").innerHTML = `${currentLevel.width}x${currentLevel.height} | ${currentLevel.bitrate / 1000 / 1000} Mbps`;
      });
    };

    const LoadBitmovin = (playoutOptions) => {
      const playerElement = CreatePlayerElement();

      const config = {
        key: "532a4784-591a-4039-8497-5feb80e5dd66",
        playback: {
          autoplay: true
        },
        events: {
          [bitmovin.player.PlayerEvent.VideoPlaybackQualityChanged]: ({targetQuality}) => {
            document.getElementById("bitrate").innerHTML =
              `${targetQuality.width}x${targetQuality.height} | ${targetQuality.bitrate / 1000 / 1000} Mbps`;
          }
        },
        ...PlayerConfiguration()
      };

      player = new bitmovin.player.Player(playerElement, config);

      player.load(playoutOptions).catch(
        (error) => {
          DestroyPlayer();
          if(error.name === "SOURCE_NO_SUPPORTED_TECHNOLOGY") {
            SetErrorMessage(`${PROTOCOL} ${DRM} playout not supported for this content`);
          } else {
            SetErrorMessage(`Bitmovin error: ${error.name}`);
            console.error(error);
          }
        }
      );
    };

    const Load = async () => {
      SetErrorMessage("");

      try {
        const contentId = document.getElementById("content-id").value;

        if(!contentId) {
          SetErrorMessage("Content ID not provided");
          return;
        }

        const objectId = contentId.startsWith("iq__") ? contentId : "";
        const versionHash = contentId.startsWith("hq__") ? contentId : "";

        const client = await ElvClient.FromNetworkName({
          networkName: document.getElementById("network").value
        });

        const privateKey = document.getElementById("private-key").value;
        if(privateKey) {
          const wallet = client.GenerateWallet();
          const signer = wallet.AddAccount({privateKey});
          client.SetSigner({signer});
        }

        let playoutOptions;
        if(PLAYER_TYPE === "bitmovin") {
          playoutOptions = await client.BitmovinPlayoutOptions({
            objectId,
            versionHash,
            protocols: [PROTOCOL],
            drms: [DRM]
          });

          LoadBitmovin(playoutOptions);
        } else {
          playoutOptions = await client.PlayoutOptions({
            objectId,
            versionHash,
            protocols: [PROTOCOL],
            drms: [DRM]
          });

          if(PROTOCOL === "hls") {
            LoadHlsJs(playoutOptions);
          } else {
            LoadDash(playoutOptions);
          }
        }
      } catch(error) {
        SetErrorMessage(error.message ? error.message : error);
        console.error(error);
      }
    };

    const SetOptions = (protocol, drm) => {
      PROTOCOL = protocol;
      DRM = drm || "";

      UpdateButtons();
    };

    const SetPlayer = (playerType) => {
      PLAYER_TYPE = playerType;

      document.getElementById("player-configuration").value = "{}";

      UpdateButtons();
    };

    document.getElementById("select-hls-dash").onclick = () => SetPlayer("hls-dash");
    document.getElementById("select-bitmovin").onclick = () => SetPlayer("bitmovin");

    document.getElementById("load-hls").onclick = () => SetOptions("hls", "clear");
    document.getElementById("load-hls-aes").onclick = () => SetOptions("hls", "aes-128");
    document.getElementById("load-hls-sample-aes").onclick = () => SetOptions("hls", "sample-aes");
    document.getElementById("load-hls-fairplay").onclick = () => SetOptions("hls", "fairplay");
    document.getElementById("load-dash").onclick = () => SetOptions("dash", "clear");
    document.getElementById("load-dash-wv").onclick = () => SetOptions("dash", "widevine");

    document.getElementById("load-button").onclick = async () => {
      try {
        document.getElementById("load-button").disabled = true;
        await Load()
      } finally {
        document.getElementById("load-button").disabled = false;
      }
    };

    UpdateButtons();
  </script>
</body>

</html>