Skip to main content

Getting started

Installation​

npm​

BeLive Player Widget is available as a npm package.

To install and save in your package.json dependencies, run:

npm install --save @belive-tech/player-widget

CDN​

For CDN, you can use jsDelivr

<script src="https://lora-sdk.belive.sg/player-widget/latest/player.min.js"></script>

Import widget​

ES6 modules​

import BeLivePlayerWidget from "@belive-tech/player-widget";

CommonJS​

const BeLivePlayerWidget = require("@belive-tech/player-widget");

Embed code snippet​

<button id="YOUR_ELEMENT_ID">Watch live</button>
<script>
   var scriptElement = document.createElement("script");
   scriptElement.src = "https://lora-sdk.belive.sg/player-widget/latest/player.min.js";
   scriptElement.onload = function () {
      window.BeLivePlayerWidget.initialize({
         showId: "SHOW_ID",
         triggerElement: document.getElementById("YOUR_ELEMENT_ID"),
      });
   };
   document.body.appendChild(scriptElement);
</script>

VOILÀ! YOU ARE NOW ALL SET FOR THE LIVE STREAM

Boilerplate code​

Too lazy to go through the document ?
Try the code below. This code snippet will cover all main functionalities of BeLive Player Widget.

<button id="YOUR_ELEMENT_ID">Watch live</button>
<button id="btn-close">Close Player</button>
<button id="btn-minimize">Minimize</button>
<button id="btn-unminimize">Unminimize</button>
<script src="https://lora-sdk.belive.sg/player-widget/latest/player.min.js"></script>
<script>
   const player = window.BeLivePlayerWidget.initialize({
      showId: "SHOW_ID",
      triggerElement: document.getElementById("YOUR_ELEMENT_ID"),
   });

   player.on(BeLivePlayerWidget.PlayerEventType.READY, () => {
      console.log("Player Widget READY");
   });

   player.on(BeLivePlayerWidget.PlayerEventType.MINIMIZED, () => {
      console.log("Player Widget MINIMIZED");
   });

   player.on(BeLivePlayerWidget.PlayerEventType.UNMINIMIZED, () => {
      console.log("Player Widget UNMINIMIZED");
   });

   player.on(BeLivePlayerWidget.PlayerEventType.CLOSE, () => {
      console.log("Player Widget CLOSE");
   });

   document.getElementById("btn-close").addEventListener("click", () => {
      player.close();
   });

   document.getElementById("btn-minimize").addEventListener("click", () => {
      player.minimize();
   });

   document.getElementById("btn-unminimize").addEventListener("click", () => {
      player.unminimize();
   });
</script>