<template>
<v-container
fill-height
fluid
grid-list-xl
>
<v-layout wrap>
<v-flex xs12>
<div class="vjs-custom-skin"
@ready="playerReadied"
v-video-player:myVideoPlayer="playerOptions">
</div>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
import videojs from 'video.js'
window.videojs = videojs
// hls plugin for videojs6
require('videojs-contrib-hls/dist/videojs-contrib-hls.js')
export default {
data () {
return {
// component options
playerOptions: {
// videojs and plugin options
height: '360',
sources: [{
withCredentials: false,
type: "application/x-mpegURL",
src: "https://logos-channel.scaleengine.net/logos-channel/live/biblescreen-ad-free/playlist.m3u8"
}],
controlBar: {
timeDivider: false,
durationDisplay: false
},
flash: { hls: { withCredentials: false }},
html5: { hls: { withCredentials: false }},
poster: "https://surmon-china.github.io/vue-quill-editor/static/images/surmon-5.jpg"
}
}
},
mounted() {
console.log('this is current player instance object', this.myVideoPlayer)
},
methods: {
playerReadied(player) {
var hls = player.tech({ IWillNotUseThisInPlugins: true }).hls
player.tech_.hls.xhr.beforeRequest = function(options) {
// console.log(options)
return options
}
}
}
}
</script>
<style type="text/css">
.video-player-box {
min-height: 200px;
}
</style>
