解决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
	}
},
posted @ 2020-08-12 17:11  huihuihero  阅读(9748)  评论(0编辑  收藏  举报