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

<script>
export default {
  name: 'VideoPlayer',
  props: {
    isSkip: Boolean,
    video: Object,
    autoplay: { type: Boolean, default: false }
  },
  data() {
    return { player: null }
  },
  methods: {
    createPlayer() {
      const _this = this
      const { FD, LD, SD } = this.video
      /*
        "OD" : "原画"
        "FD" : "流畅"
        "LD" : "标清"
        "SD" : "高清"
        "HD" : "超清"
        "2K" : "2K"
        "4K" : "4K"
      */
      this.player = new Aliplayer(
        {
          id: 'player',
          source: JSON.stringify({ FD, LD, SD }),
          width: '100%',
          height: '100%',
          autoplay: this.autoplay,
          isLive: false,
          controlBarVisibility: 'always',
          definition: 'FD,LD,SD',
          defaultDefinition: 'LD',
          useHlsPluginForSafari: true
        },
        function(player) {
          player.on('ready', function() {
            // 跳过片头
            _this.isSkip && player.seek(6)
            _this.$emit('ready', player)
          })
          player.on('timeupdate', function(event) {
            _this.$emit('timeupdate', player.getCurrentTime())
          })
          player.on('error', function(event) {
            console.log(event)
          })
        }
      )
    }
  },
  mounted() {
    this.createPlayer()
  },
  beforeDestroy() {
    this.player && this.player.dispose()
  }
}
</script>

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