<template>
  <div class="dh-video" style="height: 100%;">
    <video :id="id" autoplay class="video-js vjs-default-skin" style="width: 100%; height: 100%;" controls>
      <source :src="src">
    </video>
  </div>
</template>

<script>

export default {
  props: ['src'],

  data() {
    return {
      id: `video-${Math.ceil(Math.random() * 1000000)}`
    }
  },
  methods: {
    loadLib() {
      const promise = url => new Promise(resolve => this.$injectLib(url, () => resolve())),
          promiseCss = url => new Promise(resolve => this.$injectCss(url, () => resolve()))
      return Promise.all([
        promiseCss("https://cdn.cunwuyun.cn/videojs/video-js.min.css"),
        promise("https://cdn.cunwuyun.cn/videojs/video.min.js"),
      ]).then(() => promise("https://cdn.cunwuyun.cn/videojs/videojs-contrib-hls.js"))
    },
    initVideoJs(count = 0) {
      if (!!window.videojs) {
        videojs(this.id, {
          autoplay: true
        }, function () {
          console.log('videojs播放器初始化成功')
        })
      } else if (count < 10) {
        setTimeout(() => this.initVideoJs(), 200)
      } else console.error("videojs加载失败!")
    }
  },
  watch: {
    src: {
      handler(val) {
        if (val) {
          this.loadLib().then(() => this.initVideoJs())
        }
      },
      immediate: true,
      deep: true
    }
  }
}
</script>

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

  .video-js {
    width: 100% !important;
    height: 100% !important;
  }

  ::v-deep .video-js {
    width: 100% !important;
    height: 100% !important;

    .vjs-big-play-button {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }

  & > div {
    width: 100% !important;
    height: 100% !important;
  }
}
</style>
