title: How to hide/disable buttons controls in videojs?
body: <p>I have application with <a href="https://docs.videojs.com/" rel="nofollow noreferrer">video.js</a> and vue.</p>
  
  <p>I try to find a way to hide or disable those controls: play button, playback rate, and make the progress bar readonly.</p>
  
  <p><a href="https://docs.videojs.com/" rel="nofollow noreferrer">I the video.js docs</a> there is <code>controls: false</code> which hide all controls bar. and this is not what I want.</p>
  
  <p>I also try to figure out <a href="https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/video.js/index.d.ts#L1969" rel="nofollow noreferrer">in typescript DefinitelyTyped</a>, in controlBar options there only two properties: volumePanel and fullscreenToggle. nothing about play or progress-bar or rate.</p>
  
  <p><strong>Edit</strong> I find <code>controlBar: { playToggle: false }</code> which hide play button. </p>
  
  <p>But I still find a way to make readonly/disable progressbar.</p>
  
  <p>Any idea how to do it?</p>
  
  <p>My code is looks like this snippet:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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(() =&gt; {
          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)
        }
      }
   })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- Include stylesheet --&gt;
  &lt;link href="https://cdn.jsdelivr.net/npm/video.js@6.6.2/dist/video-js.css" rel="stylesheet"&gt;
  &lt;link href="https://cdn.jsdelivr.net/npm/vue-video-player@5.0.0/src/custom-theme.css" rel="stylesheet"&gt;
  &lt;!-- Include the videojs library --&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.6.2/video.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/vue"&gt;&lt;/script&gt;
  &lt;!-- videojs JS Vue --&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/vue-video-player@5.0.0/dist/vue-video-player.js"&gt;&lt;/script&gt;
  
  &lt;div id="vueapp"&gt;
      &lt;p&gt;{{message}}&lt;/p&gt;
      &lt;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)"&gt;
    &lt;/video-player&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>