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’,再去修改样式
上一篇: 撸一个基于VUE的WEB管理后台(三)
下一篇: PHP的学习-生成器Generators