javascripthtmlvue.jsvideo.js

How to hide/disable buttons controls in videojs?

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>

Solution

  • Try those in the options:

     controlBar: {
    playToggle: false,
    captionsButton: false,
    chaptersButton: false,            
    subtitlesButton: false,
    remainingTimeDisplay: false,
    progressControl: {
      seekBar: true
    },
    fullscreenToggle: false,
    playbackRateMenuButton: false,
  },

    and make the ProgressControl disable:

     mounted() {
   this.$refs.videoPlayer.player.controlBar.progressControl.disable();
 }