<template>
  <div class="video-player" id="player"></div>
</template>

<script>
export default {
  name: 'VideoPlayer',
  props: { video: Object },
  data() {
    return { player: null }
  },
  methods: {
    createPlayer() {
      const { FD, LD, SD } = this.video
      this.player = new Aliplayer(
        {
          id: 'player',
          source: JSON.stringify({ FD, LD, SD }),
          width: '100%',
          height: '100%',
          autoplay: true,
          isLive: false,
          controlBarVisibility: 'always',
          components: [
            {
              name: 'QualityComponent',
              type: AliPlayerComponent.QualityComponent
            }
          ]
        },
        function(player) {
          console.log('The player is created')
          /* Register the sourceloaded of the player, query the resolution of the video, invoke the resolution component, and call the setCurrentQuality method to set the resolution. */
          player.on('sourceloaded', function(params) {
            var paramData = params.paramData
            var desc = paramData.desc
            var definition = paramData.definition
            player
              .getComponent('QualityComponent')
              .setCurrentQuality(desc, definition)
          })
        }
      )
    }
  },
  mounted() {
    this.createPlayer()
  },
  beforeDestroy() {
    this.player && this.player.dispose()
  }
}
</script>

<style lang="scss" scoped>
.video-player {
  width: 100%;
  height: 100%;
}
</style>
