Skip to main content

Accelerated Mobile Page (AMP)

To add the Lura Player to an Accelerated Mobile Page (AMP), you can use the following steps:

1. 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>

2. Create an AMP page and add the following code to the head section of the page:

<script
  async
  custom-element="amp-iframe"
  src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"
></script>

3. Add the Lura Player in an iframe to the body section of the page:

<amp-iframe
  width="640"
  height="360"
  title="Lura Player"
  layout="responsive"
  sandbox="allow-scripts allow-same-origin allow-popups"
  allowfullscreen
  frameborder="0"
  src="https://<PATH_TO_HTML>?key=eyJ0b2tlbiI6ImV5SjBlWEFpT2lKS1YxUWlMQ0poYkdjaU9pSklVekkxTmlKOS5leUoyYVdRaU9pSTBNelkyTmpJeklpd2lhWE56SWpvaU0xRk1XamRhVjBKc1JrbzFWazE2WTJweWN6SlBiVGQzVlRkRWFuSXpORmtpZlEuQ3J1TTFXM2dJRXlRVEJUcWZhWTVnVGRmN2JfMlNTTmc0Z2o2SkdPajRNZyJ9"
>
  <amp-img
    layout="fill"
    src="https://w3.mp.lura.live/utils/single-pixel.png"
    placeholder
  ></amp-img>
</amp-iframe>

Note that you need to replace the placeholder value for the "key" parameter with your own Lura Player key. To generate a key you can write a function to create a Base64-encoded ASCII string from a binary string in javascript.

/**
 * Example config:
 * {
 *  lura: {
 *    appKey:
 *      "PqSpQb9pFu1A_v4qrMnRNwcXJGoFMO0B02BwGBQ4Zwa0_uMdXPXrqjnlSbJbkv8duDNk2-c3JbOXq2auBscWP1GyvlWlgFcIzaO6QFG74nY",
 *    assetId: "5179686",
 *  },
 * }
 */
function generateKey(config) {
  return btoa(JSON.stringify(config));
}

Example Code

<!DOCTYPE html>
<html ⚡>
  <head>
    <meta charset="utf-8" />
    <title>Lura Player</title>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <!--  Import the amp-iframe component in the header. -->
    <script
      async
      custom-element="amp-iframe"
      src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"
    ></script>
    <!-- You can use the `amp-bind` extension to dynamically change an iframe src. -->
    <script
      async
      custom-element="amp-bind"
      src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"
    ></script>
    <link rel="canonical" href="<% canonical %>" />
    <meta
      name="viewport"
      content="width=device-width,minimum-scale=1,initial-scale=1"
    />
    <style amp-boilerplate>
      body {
        -webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
        -moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
        -ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
        animation: -amp-start 8s steps(1, end) 0s 1 normal both;
      }
      @-webkit-keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
      @-moz-keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
      @-ms-keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
      @-o-keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
      @keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
    </style>
    <noscript
      ><style amp-boilerplate>
        body {
          -webkit-animation: none;
          -moz-animation: none;
          -ms-animation: none;
          animation: none;
        }
      </style></noscript
    >
    <style amp-custom>
      #sample-resizable-iframe div[overflow] {
        text-align: center;
        background: #f9f7f7;
        line-height: 36px;
      }
    </style>
  </head>
  <body>
    <amp-iframe
      width="640"
      height="360"
      title="Lura Player"
      layout="responsive"
      sandbox="allow-scripts allow-same-origin allow-popups"
      allowfullscreen
      frameborder="0"
      src="https://<PATH_TO_HTML>?key=eyJ0b2tlbiI6ImV5SjBlWEFpT2lKS1YxUWlMQ0poYkdjaU9pSklVekkxTmlKOS5leUoyYVdRaU9pSTBNelkyTmpJeklpd2lhWE56SWpvaU0xRk1XamRhVjBKc1JrbzFWazE2WTJweWN6SlBiVGQzVlRkRWFuSXpORmtpZlEuQ3J1TTFXM2dJRXlRVEJUcWZhWTVnVGRmN2JfMlNTTmc0Z2o2SkdPajRNZyJ9"
    >
      <amp-img
        layout="fill"
        src="https://w3.mp.lura.live/utils/single-pixel.png"
        placeholder
      ></amp-img>
    </amp-iframe>
  </body>
</html>

That's it! You should now see the Lura Player embedded in your AMP page.