解决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 小时前
Trae 辅助下的 uni-app 跨端小程序工程化开发实践分享
微信小程序·小程序·uni-app·aigc·ai编程
小白_ysf11 小时前
uniapp 开发微信小程序,获取经纬度并且转化详细地址(单独封装版本)
微信小程序·uni-app
iOS阿玮14 小时前
三年期已满,你的产品不再更新将于90天后下架。
uni-app·app·apple
bug总结1 天前
深入理解 uni-app 的 uni.createSelectorQuery()
uni-app
真上帝的左手1 天前
25. 移动端-uni-app
uni-app
编程猪猪侠1 天前
基于Uni-app+vue3实现微信小程序地图固定中心点范围内拖拽选择位置功能(分步骤详解)
uni-app
小徐_23332 天前
Trae 辅助下的 uni-app 跨端小程序工程化开发实践分享
前端·uni-app·trae
斯~内克2 天前
UniApp 页面传参方式详解
网络协议·udp·uni-app
大聪明了2 天前
uniapp vue3 使用 pinia
javascript·vue.js·uni-app
有梦想的刺儿2 天前
uniapp手机端video标签层级过高问题
uni-app