surmon-china / videojs-player

@videojs player component for @vuejs(3) and React.
https://github.surmon.me/videojs-player
MIT License
5.25k stars 1.13k forks source link

Can't hide control buttons #460

Closed aminvandh closed 7 months ago

aminvandh commented 7 months ago

Describe the bug

Sorry i reporting this as bug, Dicord link didn't work and there is no other way. I can't hide them with the another issue help: ` videojs.getPlugin('ControlBar').hide()
Full code:

<template>
  <div class="video-js">
    <video ref="videoPlayer" class="video-js"></video>
  </div>
</template>

<script>
import videojs from 'video.js';

export default {
  name: 'VideoPlayer',
  props: {
    options: {
      type: Object,
      default() {
        return {
          controls: false,
          autoplay: true,
          preload: 'auto',
          sources: [{
            src: 'a.mp4',
            type: 'video/mp4'
          }]
        };
      }
    }
  },
  data() {
    return {
      player: null
    }
  },
  mounted() {
    this.player = videojs(this.$refs.videoPlayer, this.options, () => {
      this.player.log('onPlayerReady', this);

      videojs.getPlugin('ControlBar').hide()  

    });
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose();
    }
  }
}
</script>

Reproduction

video.vue:37 Uncaught TypeError: Cannot read properties of undefined (reading 'hide') at Player2. (video.vue:37:38) at Player2. (video.es.js:4499:14) at Array.forEach () at Player2. (video.es.js:4498:20) at video.es.js:5168:7

System Info

System:
    OS: Linux 6.7 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
    CPU: (8) x64 AMD Ryzen 5 1400 Quad-Core Processor
    Memory: 5.23 GB / 7.72 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 21.6.2 - /usr/local/bin/node
    npm: 10.2.4 - /usr/local/bin/npm
  npmPackages:
    @tsconfig/node20: ^20.1.2 => 20.1.2
    @types/node: ^20.11.10 => 20.11.24
    @vitejs/plugin-vue: ^5.0.3 => 5.0.4
    @vue/tsconfig: ^0.5.1 => 0.5.1
    axios: ^1.6.7 => 1.6.7
    chart.js: ^4.4.2 => 4.4.2
    chartjs: ^0.3.24 => 0.3.24
    nano: ^10.1.3 => 10.1.3
    npm-run-all2: ^6.1.1 => 6.1.2
    pinia: ^2.1.7 => 2.1.7
    typescript: ~5.3.0 => 5.3.3
    video.js: ^7.21.5 => 7.21.5
    vite: ^5.0.11 => 5.1.5
    vue: ^3.4.15 => 3.4.21
    vue-chartjs: ^5.3.0 => 5.3.0
    vue-router: ^4.2.5 => 4.3.0
    vue-tsc: ^1.8.27 => 1.8.27
    vue-video-player: ^6.0.0 => 6.0.0

Used Package Manager

npm

Validations

aminvandh commented 7 months ago

To be exact, i don't want to see this buttons: image

aminvandh commented 7 months ago

Okay i got rid of them with these in options:

        textTrackSettings: false,
        autoplay: true,
        controls: false,
        controlBar: false,
        bigPlayButton: true,