Embedding Lura Player in NextJS

To add the Lura player to a NextJS component, you can use the following code:

Create a new lura-player.js file in your NextJS project and add the following code to it:

import React from "react";

const LuraPlayer = (element, token) => {
  const script = document.createElement("script");
  script.src = "https://w3.mp.lura.live/lura-player/latest/loader.js";
  script.async = true;
  document.body.appendChild(script);

  script.onload = () => {
    LuraPlayer(element, {
      token: token,
    });
  };
};

export default LuraPlayer;

In your component file, import the lura-player.js file and add the following code to create the Lura player instance:

import React, { useEffect } from "react";
import LuraPlayer from "./lura-player";

const Player = () => {
  useEffect(() => {
    const playerContainer = document.getElementById("player");
    LuraPlayer(
      playerContainer,
      "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ2aWQiOiI0MzY2NjIzIiwiaXNzIjoiM1FMWjdaV0JsRko1Vk16Y2pyczJPbTd3VTdEanIzNFkifQ.CruM1W3gIEyQTBTqfaY5gTdf7b_2SSNg4gj6JGOj4Mg"
    );
  }, []);

  return <div id="player" style={{ width: "640px", height: "360px" }} />;
};

export default Player;

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

This code uses the useEffect hook to create an instance of the Lura player when the component is mounted. The player container is identified using the getElementById method, and the Lura player is then created using the LuraPlayer function.

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