VueJS

To add the Lura Player to a VueJS component, you can follow the following steps:

1. Create a VueJS app

npm init vue@latest lura-player-demo-app

2. Change current working directory to lura-player-demo-app

cd lura-player-demo-app

3. Install npm packages

npm install

4. Create a new LuraPlayerComponent.vue file in src/components.

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

<script lang="ts">
  export default {
    props: ["config", "width", "height"],
    mounted() {
      const script = document.createElement("script");
      script.src =
        "https://w3.mp.lura.live/lura-player/web/latest/lura-player.js";
      script.async = true;
      document.body.appendChild(script);

      script.onload = () => {
        const luraPlayer = new lura.Player(this.$refs.playerContainer);
        luraPlayer.setConfig(this.config);
        document.body.removeChild(script);
      };
    },
  };
</script>

5. Now use the LuraPlayerComponent in your src/App.vue

<script setup lang="ts">
  import LuraPlayerComponent from "./components/LuraPlayerComponent.vue";
</script>

<template>
  <header>
    <div class="wrapper">
      <LuraPlayerComponent
        :config="{
          lura: {
            appKey:
              'PqSpQb9pFu1A_v4qrMnRNwcXJGoFMO0B02BwGBQ4Zwa0_uMdXPXrqjnlSbJbkv8duDNk2-c3JbOXq2auBscWP1GyvlWlgFcIzaO6QFG74nY',
            assetId: '5179686',
          }
        }"
      />
    </div>
  </header>
</template>

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

6. Run the VueJS app by executing:

npm run dev

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