Skip to main content

Embedding Lura Player in Accelerated Mobile Page (AMP)

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

  1. Create an AMP page and add the following code to the head section of the page:
<script
  async
  custom-element="amp-script"
  src="https://cdn.ampproject.org/v0/amp-script-0.1.js"
></script>
<script
  async
  src="https://w3.mp.lura.live/lura-player/latest/loader.js"
></script>
  1. Add the Lura player container to the body section of the page:
<div id="player" style="width: 640px; height: 360px"></div>
  1. Add the following code to the bottom of the page, just before the closing </body> tag:
<amp-script layout="container">
  <script type="text/javascript">
    LuraPlayer("player", {
      token:
        "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ2aWQiOiI0MzY2NjIzIiwiaXNzIjoiM1FMWjdaV0JsRko1Vk16Y2pyczJPbTd3VTdEanIzNFkifQ.CruM1W3gIEyQTBTqfaY5gTdf7b_2SSNg4gj6JGOj4Mg",
    });
  </script>
</amp-script>

Note that you need to replace the placeholder value for the "token" property with your own Lura player token.

This code uses the amp-script custom element to add the Lura player script to the page, and the LuraPlayer function to create the Lura player instance.

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