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

给cover-view一个变量如isCloseBtnShow,通过v-if(不要用v-show)来控制显示隐藏。监听video全屏事件,全屏时,设置变量为false,退出全屏时再设为true,这样每次退出全屏,cover-view会重新加载。被覆盖的问题就解决了。

复制代码
<video class="videoShowStyle" id="myVideo" :src="videoUrl" @fullscreenchange="playerFullScreen"
			@error="videoErrorCallback" @click="closeVideo" controls>
			<cover-image v-if="isCloseBtnShow" class="videoClose" @click="goback"
				src="/static/icon/popupClose.png"></cover-image>
		</video>

data() {
			return {
				isCloseBtnShow: true,
		}
},

playerFullScreen(e) {
	if (e.detail.fullScreen) { //全屏
		this.isCloseBtnShow = false
	} else { //非全屏			
		this.isCloseBtnShow = true
	}
},
相关推荐
iOS阿玮7 小时前
百款出海社交 App 一夜下架!2026,匿名社交的生死劫怎么破?
uni-app·app·apple
肖老师xy13 小时前
uniPush2.0对接
uni-app
浮桥15 小时前
uniapp + h5实现悬浮活动按钮组件
前端·javascript·uni-app
笨笨狗吞噬者16 小时前
【uniapp】小程序端解决分包的uni_modules打包后产物进入主包中的问题
前端·微信小程序·uni-app
肖老师xy19 小时前
uniapp ios离线打包后xcode修改
ios·uni-app
浮桥19 小时前
uniapp + h5 -- 简易抽奖转盘组件(文字版)
前端·javascript·uni-app
特立独行的猫a19 小时前
跨平台开发实战:uni-app x 鸿蒙HarmonyOS网络模块封装与轮播图实现
android·网络·uni-app·harmonyos·轮播图·uni-app-x
iOS阿玮2 天前
开工第一天,别让AI写的代码触发3.2f封号。
uni-app·app·apple
特立独行的猫a2 天前
uniapp-x的HarmonyOS鸿蒙应用开发:tabbar底部导航栏的实现
华为·uni-app·harmonyos·鸿蒙·uniapp-x
迪巴拉15252 天前
基于Yolov8训练的Flask后端和Uniapp野生菌识别系统
yolo·flask·uni-app