Skip to main content

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/latest/loader.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, and config object as params.

Here is an example:

<div id="player" style="width: 640px; height: 360px"></div>
<script src="https://w3.mp.lura.live/lura-player/latest/loader.js"></script>
<script>
    LuraPlayer("player", {
        token: "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ2aWQiOiI0MzY2NjIzIiwiaXNzIjoiM1FMWjdaV0JsRko1Vk16Y2pyczJPbTd3VTdEanIzNFkifQ.CruM1W3gIEyQTBTqfaY5gTdf7b_2SSNg4gj6JGOj4Mg"
    });
</script>

Instead of providing an id as the first param, you can also provide an HTML Element in javascript as first param.

<body style="width: 100vw; height: 100vh; margin: 0;">
    <script src="https://w3.mp.lura.live/lura-player/latest/loader.js"></script>
    <script>
        LuraPlayer(document.body, {
            token: "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ2aWQiOiI0MzY2NjIzIiwiaXNzIjoiM1FMWjdaV0JsRko1Vk16Y2pyczJPbTd3VTdEanIzNFkifQ.CruM1W3gIEyQTBTqfaY5gTdf7b_2SSNg4gj6JGOj4Mg"
        });
    </script>
</body>

Embedding lura player to your website in an iframe is the recommended way. In order to embed in an iframe, you can create an iframe as shown below.

<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 = {
        token: "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ2aWQiOiI0MzY2NjIzIiwiaXNzIjoiM1FMWjdaV0JsRko1Vk16Y2pyczJPbTd3VTdEanIzNFkifQ.CruM1W3gIEyQTBTqfaY5gTdf7b_2SSNg4gj6JGOj4Mg",
        autoplay: true
    };
    const url = "https://w3.mp.lura.live/lura-player/latest/fullscreen.html?key=" + btoa(JSON.stringify(config));
    document.getElementById("player").src = url;
</script>