欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

aliplayer隐藏工具条

程序员文章站 2022-06-06 18:37:16
...
 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’,再去修改样式