<template>
  <div>
    <video id="video-player" class="video-js vjs-defaultskin"></video>
  </div>
</template>
<script lang="ts">
// Importing video-js
import videojs from 'video.js'
import qualityLevels from 'videojs-contrib-quality-levels'

videojs.registerPlugin('qualityLevels', qualityLevels)

export default {
  name: 'VideoJsPlayer',
  props: {
    options: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    let player: any
    return {
      player
    }
  },
  // initializing the video player
  // when the component is being mounted
  mounted() {
    this.player = videojs('video-player', this.options, () => {})
  }
}
</script>
