如何隱藏/禁用videojs中的按鈕控件？

Question

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

我試圖找到一種隱藏或禁用這些控件的方法：播放按鈕、播放速率，並使進度條變為只讀。

我在 video.js 文檔中有controls: false隱藏所有控件欄。 這不是我想要的。

我還嘗試在打字稿中確定確定類型，在 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>

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

你可以這樣做：

 <video-player controlBar={false} />

Answer 3

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