<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>
  import videojs from 'video.js'
  import 'videojs-contrib-hls'
  import 'video.js/dist/video-js.css'

  export default {
    props: ['src'],

    data () {
      return {
        isInit: false,
        id: `video-${Math.ceil(Math.random() * 1000000)}`
      }
    },

    watch: {
      src: {
        handler(val) {
          if (val) {
            this.$nextTick(() => {
              videojs(this.id, {
                autoplay: true
              }, function () { console.log('videojs播放器初始化成功') })
            })
          }
        },
        immediate: true,
        deep: true
      }
    },

    mounted () {
      if (this.src) {
        this.$nextTick(() => {
           videojs(this.id, {
            autoplay: true
          }, function () {
            this.isInit = true
            console.log('videojs播放器初始化成功')
          })
        })
      }
    }
  }
</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>
