解决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
	}
},
相关推荐
半开半落10 小时前
uniapp通过npm使用第三方库兼容微信小程序
微信小程序·npm·uni-app
随笔记11 小时前
HbuilderX载入项目,运行后唤起微信开发者工具,提示:Error: Fail to open IDE,唤醒不起来怎么办
javascript·微信小程序·uni-app
Lsx_11 小时前
一文读懂 Uniapp 小程序登录流程
前端·微信小程序·uni-app
夏目友人爱吃豆腐12 小时前
uniapp源码解析(Vue3/Vite版)
前端·vue.js·uni-app
2501_9151063214 小时前
iOS 抓包全流程指南,HTTPS 抓包、TCP 数据流分析与多工具协同的方法论
android·tcp/ip·ios·小程序·https·uni-app·iphone
邱泽贤14 小时前
uniapp 当前页调用上一页的方法
前端·javascript·uni-app
集成显卡14 小时前
AI取名大师 | uni-app 微信小程序打包 v-bind、component 动态组件问题
人工智能·微信小程序·uni-app
anyup1 天前
支持鸿蒙!开源三个月,uView Pro 开源库近期更新全面大盘点,及未来计划
前端·vue.js·uni-app
阿斌_bingyu7091 天前
uniapp实现android/IOS消息推送
android·ios·uni-app
茶憶1 天前
UniApp RenderJS中集成 Leaflet地图,突破APP跨端开发限制
javascript·vue.js·uni-app