Embedding Lura Player in VueJS

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

1. Import the player script in your component file by adding the following code:

<template>
  <div ref="playerContainer" style="width: 640px; height: 360px;"></div>
</template>

<script>
  export default {
    mounted() {
      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(this.$refs.playerContainer, {
          token:
            "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ2aWQiOiI0MzY2NjIzIiwiaXNzIjoiM1FMWjdaV0JsRko1Vk16Y2pyczJPbTd3VTdEanIzNFkifQ.CruM1W3gIEyQTBTqfaY5gTdf7b_2SSNg4gj6JGOj4Mg",
        });
      };
    },
    beforeDestroy() {
      document.body.removeChild(script);
    },
  };
</script>

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

This component uses the mounted lifecycle hook to load the player script and create an instance of the player, and the beforeDestroy hook to remove the player script when the component is destroyed.

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