Skip to main content

Make Your Own UI

If you want to add a custom UI on top of Lura Player, you can add enabled: false parameter to your config in controls, and Lura Player won't load any user interface.

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

  <body>
    <div>
      <div id="player" style="width: 640px; height: 360px"></div>
      <div>
        <!-- Your UI Goes Here -->
        <button onclick="togglePlayPause()">PLAY/PAUSE</button>
      </div>
    </div>
    <script src="https://w3.mp.lura.live/lura-player/latest/lura-player.js"></script>
    <script>
      const config = {
        content: {
          title: "Tears of steel",
          media: [
            {
              url: "https://w3.mp.lura.live/test-assets/tears-of-steel/hls-ts.m3u8",
              type: "application/x-mpegURL",
            },
            {
              url: "https://w3.mp.lura.live/test-assets/tears-of-steel/dash.mpd",
              type: "application/dash+xml",
            },
            {
              url: "https://w3.mp.lura.live/test-assets/tears-of-steel/mp4.mp4",
              type: "video/mp4",
            },
            {
              url: "https://w3.mp.lura.live/test-assets/tears-of-steel/captions/en.vtt",
              type: "text/vtt",
              language: "en",
            },
            {
              url: "https://w3.mp.lura.live/test-assets/tears-of-steel/captions/es.vtt",
              type: "text/vtt",
              language: "es",
            },
            {
              url: "https://w3.mp.lura.live/test-assets/tears-of-steel/poster.jpg",
              type: "image/jpg",
            },
            {
              url: "https://w3.mp.lura.live/test-assets/tears-of-steel/trick-play/hi.bif",
              type: "image/bif",
              width: 640,
              height: 360,
            },
          ],
        },
        controls: {
          enabled: false,
        },
      };
      const player = new lura.Player(document.getElementById("player"));
      player.setConfig(config);
      function togglePlayPause() {
        if (player.isPaused()) {
          player.play();
        } else {
          player.pause();
        }
      }
    </script>
  </body>
</html>