解决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
	}
},
相关推荐
烂蜻蜓6 小时前
深入理解 Uniapp 中的 px 与 rpx
前端·css·vue.js·uni-app·html
狂团商城小师妹6 小时前
智慧废品回收小程序php+uniapp
大数据·微信·微信小程序·小程序·uni-app·微信公众平台
烂蜻蜓7 小时前
Uniapp 中布局魔法:display 属性
前端·javascript·css·vue.js·uni-app·html
毕业设计-018 小时前
0083.基于springboot+uni-app的社区车位租赁系统小程序+论文
spring boot·小程序·uni-app
百事可乐☆9 小时前
uniapp 九宫格抽奖
uni-app
九亿少女无法触及的梦ى16 小时前
uni-app集成sqlite
sqlite·uni-app
繁依Fanyi17 小时前
巧妙实现右键菜单功能,提升用户操作体验
开发语言·前端·javascript·vue.js·uni-app·harmonyos
乔冠宇1 天前
微信小程序修改个人信息头像(uniapp开发)
微信小程序·小程序·uni-app
一个处女座的程序猿O(∩_∩)O1 天前
Uniapp 开发中遇到的坑与注意事项:全面指南
uni-app
Elena_Lucky_baby1 天前
uniapp 网络请求封装(uni.request 与 uView-Plus)
uni-app