43 lines
876 B
Vue
43 lines
876 B
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 {}
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
let player: any
|
|
return {
|
|
player
|
|
}
|
|
},
|
|
// initializing the video player
|
|
// when the component is being mounted
|
|
mounted() {
|
|
this.player = videojs('video-player', this.options, () => {
|
|
createQualitySelector(this.player)
|
|
})
|
|
},
|
|
unmounted() {
|
|
this.player.dispose()
|
|
}
|
|
}
|
|
</script>
|