<template>
   <div id="player"></div>
</template>

<script setup>
import { onMounted, onUnmounted, ref } from 'vue';
const playJs=ref("//player.polyv.net/resp/live-h5-player/latest/liveplayer.min.js");
const player=ref(null);
const props=defineProps({
    vid:{
        type: String,
        default:''
    }
})
   const loadPlayerScript=(callback)=> {
      if (!window.polyvLivePlayer) {
        const myScript = document.createElement('script');
        myScript.setAttribute('src', playJs.value);
        myScript.onload = callback;
        document.body.appendChild(myScript);
      } else {
        callback();
      }
    };
     const loadPlayer=()=> {
      const polyvLivePlayer = window.polyvLivePlayer;
        player.value = polyvLivePlayer({
        wrap: '#player',
        width: '100%',
        height: 250,
        vid: props.vid,
      });
    }
   onMounted(()=>{
      loadPlayerScript(loadPlayer);
   })
   onUnmounted(()=>{
      player.value.destroy();
   })
</script>

<style>

</style>