Skip to main content

Make Your Own UI

If you want to add a custom UI on top of Lura Player, you can add ui: "none" parameter to your config, and Lura Player won't load the default user interface.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Lura Player Test</title>
  </head>

  <body>
    <div id="player" style="width: 640px; height: 360px">
        <div>
            {/* Your UI Goes Here */}
            <button onclick="togglePlayPause"></button>
        </div>
    </div>
    <script src="https://w3.mp.lura.live/lura-player/latest/loader.js"></script>
    <script>
      LuraPlayer("player", {
        token:
          "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ2aWQiOiI5MzExNzciLCJpc3MiOiJOWG1BYWpQbDNNMVNYSUduU2tHeFlQczkyYkRxNGRvTCJ9.zElQ22xFrUWhqMiuZ5l7uQpap0xYiZLUXKN-a7wgY58",
        ui: "none"
      });
      function togglePlayPause() {
        if (player.isPaused()) {
            player.play();
        } else {
            player.pause();
        }
      }
    </script>
  </body>
</html>