解决uniapp视频video组件进入全屏再退出全屏后,cover-view失效的问题
解释:uniapp的video组件在非H5端是覆盖在所有层级之上的,要想在video组件层级之上添加自定义盒子,则需要用cover-view。如图红框内为自定义内容
video组件详细解释见文档: https://uniapp.dcloud.io/component/video?id=video
注:App端vue页面 cover-view、cover-image 中不支持嵌套其它组件,包括再次嵌套cover-view。只能有一个层级即<cover-view>文字</cover-view>
cover-view详细解释见文档: https://uniapp.dcloud.io/component/cover-view?id=cover-view
问题所在:初始化Video和cover-view盒子时,cover-view是覆盖在video组件之上的。但在video全屏后,再退出全屏时,cover-view的盒子会被video组件覆盖。
解决方法
给cover-view一个变量如isshow,通过v-if(不要用v-show)来控制显示隐藏。监听video全屏事件,全屏时,设置变量为false,退出全屏时再设为true,这样每次退出全屏,cover-view会重新加载。被覆盖的问题就解决了。
<video
class="video-player"
id="videoPlayer"
:src="videoUrl"
:poster="videoInfo.vimage"
:autoplay="isAutoplay"
object-fit="fill"
@play="videoPlayStart"
@pause="videoPlayPause"
@fullscreenchange="playerFullScreen"
@error="videoPlayError"
>
<cover-view class="video-definition-btn" @tap="showDefinitionOption" v-if="isDefinitionBtnShow">高清</cover-view>
</video>
playerFullScreen(e){
if(e.detail.fullScreen){ //全屏
this.isDefinitionBtnShow=false
}else{ //非全屏
this.isDefinitionBtnShow=true
}
},