如何隐藏/禁用 videojs 中的按钮控件？

Question

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

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

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

我还尝试 在打字稿 DefinitelyTyped 中找出，在 controlBar 选项中只有两个属性：volumePanel 和 fullscreenToggle。与播放、进度条或速率无关。

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

但我仍然找到一种方法来制作只读/禁用进度条。

知道怎么做吗？

我的代码看起来像这个片段：

 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>

原文由 Jon Sud 发布，翻译遵循 CC BY-SA 4.0 许可协议

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();
 }

原文由 Shlomi Levi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

你可以这样做：

  <video-player controlBar={false} />

原文由 Hyouk Seo 发布，翻译遵循 CC BY-SA 4.0 许可协议