aliplayer隐藏工具条

 initVideo (url) {
     
      const self = this

      self.videoHeight = window.getComputedStyle(this.$refs.container).height

      if (self.player) {
     
        console.log('视频已经存在...')
      } else {
     
        try {
     
          self.player = new Aliplayer({
     
            id: self.videoDomId,
            source: url,
            width: '100%',
            height: self.videoHeight,
            autoplay: true,
            isLive: true,
            rePlay: true,
            playsinline: true,
            preload: true,
            // controlBar: false,
            controlBarVisibility: 'always',  //重点!!!!!
            useH5Prism: true
          }, function (player) {
     
            //先静音然后播放,解决浏览器不能自动播放问题
            player.mute();
            player.play();

            console.log('The player is created')
          })
        } catch (err) {
     
          console.warn(err)
        }
      }
    },
<style lang="scss">
.video-container {
     
  height: 100%;
  .operators {
     
    display: none;
  }
}
.prism-live-display,  //live
.prism-cc-btn, //cc
.prism-setting-btn, //设置
.volume-icon.mute, //音量图标
.prism-fullscreen-btn, //全屏
.prism-big-play-btn, //播放按钮
.prism-info-display 
.prism-volume {
     
  display: none !important;
}
.prism-info-display.prism-info-left-bottom{
     
  display: none;
}
</style>

重点:将 controlBarVisibility设置为’always’,再去修改样式

你可能感兴趣的:(aliplayer,web,development)