解决uniapp视频video组件进入全屏再退出全屏后，cover-view失效的问题

时间：2024-02-17 17:29:24

解释：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
	}
},

相关文章