最近有有一个需求,一些必学的课程不允许用户拖动进度条,微信小程序并没有提供竞争拖动进度条的方法,因此自己在播放器里面加了cover-view,让他在小屏或者全屏状态下遮挡住进度条
<!-- 视频 -->
<view class="study_video">
<!-- 视频播放开始 -->
<video enable-progress-gesture="{{false}}" bindfullscreenchange="screenChange" bindplay="bindplay" initial-time='{{timeLong}}' id="myVideo" src="{{url}}" show-bottom-progress="{{false}}" show-progress="{{true}}" poster="{{resheadUrl + playCourseData.iconPath}}" autoplay="true">
<cover-view class="{{bigsScreen?'bigScreen':'cover'}}"></cover-view>
</video>
<!-- 视频播放结束 -->
</view>
screenChange(e){
let fullScreen = e.detail.fullScreen //值true为进入全屏,false为退出全屏
if (!fullScreen ){ //退出全屏
this.setData({
bigsScreen:false
})
}else{ //进入全屏
this.setData({
bigsScreen: true
})
}
},
.bigScreen{
position: absolute;
bottom: 0;
z-index: 998;
height: 20%;
/* background-color: red; */
background-color: rgba(255, 255, 255, 0.007);
margin-left: 70px;
width: 80%;
}
.cover{
position: absolute;
bottom: 0;
z-index: 998;
height: 20%;
/* background-color: red; */
background-color: rgba(255, 255, 255, 0.007);
margin-left: 60px;
width: 70%;
}