解决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
	}
},
相关推荐
雪芽蓝域zzs13 小时前
uniapp富文本rich-text
uni-app
Qlittleboy15 小时前
uniAPP报错:v-for 暂不支持循环数据: (env: Windows,mp,1.06.2307260; lib: 3.12.0)
uni-app
曾帅16815 小时前
uniapp安卓启动图
android·opencv·uni-app
m0_7408596215 小时前
解决uniapp折叠面板报错this.collapse.onChange is not a function
uni-app
天府之绝15 小时前
uniapp 中使用uview表单验证时,自定义扩展的表单,在改变时无法触发表单验证处理;
开发语言·前端·javascript·vue.js·uni-app
2501_9151063215 小时前
常见 iOS 抓包工具的使用方式与组合思路
android·ios·小程序·https·uni-app·iphone·webview
脾气有点小暴16 小时前
uniapp真机调试无法连接
前端·uni-app
HashTang1 天前
【AI 编程实战】第 7 篇:登录流程设计 - 多场景、多步骤的优雅实现
前端·uni-app·ai编程
Mr -老鬼2 天前
移动端跨平台适配技术框架:从发展到展望
android·ios·小程序·uni-app
一颗小青松2 天前
uniapp app端显示天气详情
uni-app