西瓜视频（xgplayer）播放hls视频

平时经常对接视频flv、hls、萤石云等，但是一直没有做记录分享；

今天针对hls西瓜视频的插件来分享记录下，个人觉得xgplayer的体验和对流的控制是要比hls.js要好很多的，先看效果图；

需要注意一下：
        *** vite项目下，使用依赖import 的方式播放有问题，需要改为全局引入静态min.js 

        可以去西瓜视频官网上去f12 自行 down一下文件

<template>
  <div :id="hlsId" />
</template>
<script>
import "xgplayer";
import HlsJsPlayer from "xgplayer-hls.js"
export default {
  props: {
    width: {
      type: Number,
      default: null
    },
    url: {
      type: String,
      default: null
    },
    poster: {
      type: String,
      default: ''
    },
    autoplay:{
      type: Boolean,
      default: false
    }
  },
  computed: {
    hlsId() {
      return 'hls' +  Math.floor(1000000000 + Math.random() * 9000000000);
    }
  },
  mounted() {
    this.initVideo()
  },
  methods: {
    destroy() {
      this.player && this.player.destroy();
    },
    initVideo() {
      this.destroy();
      const { width,height,poster,autoplay } = this;
      this.player = new HlsJsPlayer({
        id: this.hlsId, // 上面容器的id选择器
        url: this.url,
        poster,
        width,
        height,
        autoplay,
      });
    },
  },
  beforeDestroy() {
    this.destroy()
  }
}
</script>