safetwitch/src/components/VideoPlayer.vue

<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'
import { createQualitySelector } from '@/assets/qualitySelector'
import 'video.js/dist/video-js.css'

videojs.registerPlugin('qualityLevels', qualityLevels)

export default {
  name: 'VideoJsPlayer',
  props: {
    options: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  emits: ['PlayerTimeUpdate'],
  data() {
    let player: any
    return {
      player
    }
  },
  // initializing the video player
  // when the component is being mounted
  mounted() {
    const emit = this.$emit
    this.player = videojs('video-player', this.options, () => {
      createQualitySelector(this.player)
      let i = 0

      this.player.on('timeupdate', () => {
        emit('PlayerTimeUpdate', this.player.currentTime())
    })
    })
  },
  unmounted() {
    this.player.dispose()
  }
}
</script>