<template>
  <div>
    <div id="aLiVideoPlayer" class="prism-player"/>
  </div>
</template>

<script>

export default {
  props: {
    id: {
      type: String,
      default() {
        return ''
      }
    },
    type: {
      type: String,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      hls: false,
      player: null,
      url: ''
    }
  },
  beforeDestroy() {
    this.player && this.player.dispose()
  },
  created() {
    console.info(this.id)
    this.showVideo()
  },
  methods: {
    showVideo() {
      this.$nextTick(() => {
        // eslint-disable-next-line no-undef
        this.player = new Aliplayer({
          'id': 'aLiVideoPlayer',
          'source': config.ysVideoUrl + '/live/loadmin/38f8c7d91db97445a1f6e0ef5bbd5ae0/' + config.ysVideoDefinition + '/' + this.id + '.m3u8',
          // 'source': 'http://172.16.11.146:8991/videoApi/live/loadmin/38f8c7d91db97445a1f6e0ef5bbd5ae0/4/MT-CFD-MK-IPC-16216_1.m3u8',
          'width': '100%',
          'height': '500px',
          'autoplay': true,
          'isLive': true,
          'rePlay': false,
          'playsinline': true,
          'preload': true,
          'controlBarVisibility': 'hover',
          'useH5Prism': true
        }, function(player) {
          console.log('The player is created')
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
