Embedding the LuraPlayer

In order to use the LuraPlayer, you need to first load the LuraPlayer library with the following script

<script src="https://w3.mp.lura.live/lura-player/web/latest/lura-player.js"></script>

After the LuraPlayer Library is loaded, you can use various methods to embed LuraPlayer in your application.

Basic content playback

The following steps and code sample show how to play a single media asset with the player:

Create a named div in the body of your page in the location where you want the player to appear.
Create the LuraPlayer instance with the id of the div you've created.
Set the config of the LuraPlayer instance and you are ready to go.

Here is an example:

<div id="player" style="width: 640px; height: 360px"></div>
<script src="https://w3.mp.lura.live/lura-player/web/latest/lura-player.js"></script>
<script>
  const config = {
    lura: {
      appKey:
        "PqSpQb9pFu1A_v4qrMnRNwcXJGoFMO0B02BwGBQ4Zwa0_uMdXPXrqjnlSbJbkv8duDNk2-c3JbOXq2auBscWP1GyvlWlgFcIzaO6QFG74nY",
      assetId: "5179686",
    },
  };
  const player = new lura.Player(document.getElementById("player"));
  player.setConfig(config);
</script>

You can also embed lura player to your website in an iframe. In order to embed in an iframe, you can create an iframe as shown below.

First create an HTML page with the following code and serve it in a bucket

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Lura Player</title>
  </head>

  <body>
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        border: 0;
      }
    </style>
    <script src="https://w3.mp.lura.live/lura-player/web/latest/lura-player.ui.js"></script>
    <script src="https://w3.mp.lura.live/lura-player/web/latest/lura-player.js"></script>
    <script>
      window.players = [];
      function create() {
        const div = document.createElement("div");
        div.style.width = "100%";
        div.style.height = "100%";
        document.body.appendChild(div);
        const key = new URLSearchParams(window.location.search).get("key");
        const player = new lura.Player(div);
        player.setConfig(JSON.parse(window.atob(key)));
        window.player = player;
      }
      create();
    </script>
  </body>
</html>

Then you can embed to your website with the following code block.

<iframe
  id="player"
  style="width: 640px; height: 360px; border: 0px; padding: 0px; margin: 0px"
  allow="autoplay; fullscreen; encrypted-media;"
  allowfullscreen
  webkitallowfullscreen
  mozallowfullscreen
  scrolling="no"
></iframe>
<script>
  const config = {
    lura: {
      appKey:
        "PqSpQb9pFu1A_v4qrMnRNwcXJGoFMO0B02BwGBQ4Zwa0_uMdXPXrqjnlSbJbkv8duDNk2-c3JbOXq2auBscWP1GyvlWlgFcIzaO6QFG74nY",
      assetId: "5179686",
    },
  };
  const url = "https://<PATH_TO_HTML>?key=" + btoa(JSON.stringify(config));
  document.getElementById("player").src = url;
</script>

Basic content playback​

Basic content playback