解决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
	}
},
相关推荐
芋头莎莎7 小时前
基于MQTT通讯UNIapp程序解析JSON数据
前端·uni-app·json
霸王蟹8 小时前
Uni-app 跨端开发框架Unibest快速体验
前端·笔记·微信·uni-app·unibest
木子啊9 小时前
Uni-app条件编译:跨端开发终极指南
uni-app·条件编译
老毛肚9 小时前
uniapp-ruoyi-spring部署宝塔
java·spring·uni-app
Mr Xu_10 小时前
UniApp 实战:深度解析 App 端自动检测与静默更新(含强制更新)
javascript·vue.js·uni-app
说给风听.11 小时前
基于 Vue3 的 UniApp 实战手册:多端开发与技能变现之路
uni-app
外派叙利亚11 小时前
uniapp canvas 自定义仪表盘 可滑动 可点击 中间区域支持自定义
前端·javascript·uni-app·html
不爱学习小趴菜11 小时前
uniapp微信小程序无法屏蔽右上角胶囊按钮(...)问题解决方案
微信小程序·小程序·uni-app
WeiAreYoung12 小时前
uni-app Xcode制作iOS谷歌广告Google Mobile Ads SDK插件
ios·uni-app
2501_9160088912 小时前
iOS 开发助手工具,设备信息查看、运行日志、文件管理等方面
android·ios·小程序·https·uni-app·iphone·webview