解决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
	}
},
相关推荐
timeguys4 小时前
【前端】[vue3] [uni-app]使用 vantUI 框架
前端·uni-app
Aiden Targaryen7 小时前
Windows/MacOS WebStorm/IDEA 中开发 Uni-App 配置
java·uni-app·webstorm
想要飞翔的pig8 小时前
uniapp+vue3页面滚动加载数据
前端·vue.js·uni-app
会功夫的李白8 小时前
uniapp自动构建pages.json的vite插件
前端·uni-app·vite
TE-茶叶蛋8 小时前
Uniapp、Flutter 和 React Native 全面对比
flutter·react native·uni-app
特立独行的猫a12 小时前
uni-app 开发HarmonyOS的鸿蒙影视项目分享:从实战案例到开源后台
uni-app·开源·harmonyos·鸿蒙·影视
七七小报15 小时前
uniapp-商城-61-后台 新增商品(添加商品到数据库)
uni-app
hbcui198415 小时前
uni-app x正式支持鸿蒙原生应用开发
uni-app·harmonyos·uni-app x
lqj_本人15 小时前
鸿蒙OS&UniApp制作支持多图上传的图片选择器:打造高性能移动端上传体验#三方框架 #Uniapp
华为·uni-app·harmonyos
好好的哦17 小时前
uni-app小程序登录后…
小程序·uni-app