I have application with video.js and vue.
I try to find a way to hide or disable those controls: play button, playback rate, and make the progress bar readonly.
I the video.js docs there is controls: false which hide all controls bar. and this is not what I want.
I also try to figure out in typescript DefinitelyTyped, in controlBar options there only two properties: volumePanel and fullscreenToggle. nothing about play or progress-bar or rate.
Edit I find controlBar: { playToggle: false } which hide play button.
But I still find a way to make readonly/disable progressbar.
Any idea how to do it?
My code is looks like this snippet:
Vue.use(VueVideoPlayer)
new Vue({
el: '#vueapp',
data() {
return {
message: 'Hi from Vue',
// videojs options
playerOptions: {
height: '360',
autoplay: true,
muted: true,
language: 'en',
playbackRates: [0.7, 1.0, 1.5, 2.0],
sources: [{
type: "video/mp4",
// mp4
src: "http://vjs.zencdn.net/v/oceans.mp4",
// webm
// src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
}],
poster: "https://surmon-china.github.io/vue-quill-editor/static/images/surmon-1.jpg",
}
}
},
mounted() {
// console.log('this is current player instance object', this.player)
setTimeout(() => {
console.log('dynamic change options', this.player)
this.player.muted(false)
}, 2000)
},
computed: {
player() {
return this.$refs.videoPlayer.player
}
},
methods: {
// listen event
onPlayerPlay(player) {
// console.log('player play!', player)
},
onPlayerPause(player) {
// console.log('player pause!', player)
},
onPlayerEnded(player) {
// console.log('player ended!', player)
},
onPlayerLoadeddata(player) {
// console.log('player Loadeddata!', player)
},
onPlayerWaiting(player) {
// console.log('player Waiting!', player)
},
onPlayerPlaying(player) {
// console.log('player Playing!', player)
},
onPlayerTimeupdate(player) {
// console.log('player Timeupdate!', player.currentTime())
},
onPlayerCanplay(player) {
// console.log('player Canplay!', player)
},
onPlayerCanplaythrough(player) {
// console.log('player Canplaythrough!', player)
},
// or listen state event
playerStateChanged(playerCurrentState) {
// console.log('player current update state', playerCurrentState)
},
// player is ready
playerReadied(player) {
// seek to 10s
console.log('example player 1 readied', player)
player.currentTime(10)
// console.log('example 01: the player is readied', player)
}
}
})<!-- Include stylesheet --><link href="https://cdn.jsdelivr.net/npm/video.js@6.6.2/dist/video-js.css" rel="stylesheet"><link href="https://cdn.jsdelivr.net/npm/vue-video-player@5.0.0/src/custom-theme.css" rel="stylesheet"><!-- Include the videojs library --><script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.6.2/video.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vue"></script><!-- videojs JS Vue --><script src="https://cdn.jsdelivr.net/npm/vue-video-player@5.0.0/dist/vue-video-player.js"></script><div id="vueapp"><p>{{message}}</p><video-player class="vjs-custom-skin"
ref="videoPlayer"
:options="playerOptions"
:playsinline="true"
@play="onPlayerPlay($event)"
@pause="onPlayerPause($event)"
@ended="onPlayerEnded($event)"
@loadeddata="onPlayerLoadeddata($event)"
@waiting="onPlayerWaiting($event)"
@playing="onPlayerPlaying($event)"
@timeupdate="onPlayerTimeupdate($event)"
@canplay="onPlayerCanplay($event)"
@canplaythrough="onPlayerCanplaythrough($event)"
@ready="playerReadied"
@statechanged="playerStateChanged($event)"></video-player></div>