如何 hide/disable videojs 中的按钮控件？

Question

我有 video.js 和 vue 的应用程序。

我试图找到一种方法来隐藏或禁用这些控件：播放按钮、播放速率，并使进度条只读。

I the video.js docs 有 controls: false 隐藏所有控件栏。这不是我想要的。

我也想弄清楚in typescript DefinitelyTyped，在controlBar选项中只有两个属性：volumePanel和fullscreenToggle。与播放、进度条或速率无关。

编辑我发现 controlBar: { playToggle: false } 隐藏了播放按钮。

但我还是找到了制作readonly/disable进度条的方法。

知道怎么做吗？

我的代码如下所示：

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>

Answer 1

尝试选项中的那些：

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

并使 ProgressControl 禁用：

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

Answer 2

player.controlBar.fullscreenToggle.dispose();

您可以使用：

.disable() > shows the button but is not active to iterate
.hide() > hides the button, but the element is in the DOM
.dispose() > removes the element entirely

Answer 3

你可以这样做：

 <video-player controlBar={false} />

如何 hide/disable videojs 中的按钮控件？

How to hide/disable buttons controls in videojs?

html

javascript

video.js

vue.js