<template>
  <div class="QdmVideo">
    <video-player class="vjs-custom-skin" :options="playerOptions"></video-player>
  </div>
</template>
<script>
import 'videojs-contrib-hls'
import { videoPlayer } from 'vue-video-player/src'
export default {
  name: 'QdmVideo',
  components: {
    videoPlayer
  },
  props: {
    url: {
      type: String,
      default: ''
    },
    autoplay: {
      type: Boolean,
      default: false
    },
    controls: {
      type: Boolean,
      default: true
    },
    type: {
      type: String,
      default: 'video/mp4'
    }
  },
  data() {
    return {
      playerOptions: {}
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.playerOptions = {
        language: 'zn',
        playbackRates: [0.5, 1.0, 1.5, 2.0],
        sources: [
          {
            type: this.type,
            withCredentials: false,
            src: this.url
          }
        ],
        techOrder: ['html5'],
        flash: { hls: { withCredentials: true } },
        html5: { hls: { withCredentials: true } },
        autoplay: this.autoplay,
        controls: this.controls,
        notSupportedMessage: '不支持的视频格式'
      }
    })
  }
}
</script>
<style lang="less">
.QdmVideo {
  width: 100%;
  height: 100%;
  position: relative;
  .vjs-custom-skin {
    height: 100%;
    .video-js {
      height: 100%;
      width: 100%;
    }
  }
}
</style>
