<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 { createQualitySelector } from '../assets/qualitySelector'
import "videojs-contrib-quality-levels";
import "../assets/vjs-theme.css"

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, () => {
      this.player.log('video player ready', this);

      this.player.hlsQualitySelector({
        displayCurrentQuality: true,
      });

      createQualitySelector(this.player)

    });
  },
  // destroying the video player
  // when the component is being destroyed
  beforeDestroy() {
    if (this.player) {
      this.player.dispose();
    }
  }
}
</script><link rel="stylesheet" href="style.css">