解决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
	}
},
相关推荐
2501_916008892 小时前
2026 iOS 证书管理,告别钥匙串依赖,构建可复制的签名环境
android·ios·小程序·https·uni-app·iphone·webview
2501_915918418 小时前
iOS App 拿不到数据怎么办?数据解密导出到分析结构方法
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_916008898 小时前
iOS App 抓包看不到内容,从有请求没数据一步步排查
android·ios·小程序·https·uni-app·iphone·webview
扶苏10029 小时前
记一次 uni-app开发微信小程序 textarea 的“伪遮挡”踩坑实录
微信小程序·小程序·uni-app
RuoyiOffice1 天前
企业请假销假系统设计实战:一张表、一套流程、两段生命周期——BPM节点驱动的表单变形术
java·spring·uni-app·vue·产品运营·ruoyi·anti-design-vue
KongHen021 天前
uniapp-x实现自定义tabbar
前端·javascript·uni-app·unix
RuoyiOffice1 天前
SpringBoot+Vue3+Uniapp实现PC+APP双端考勤打卡设计:GPS围栏/内网双模打卡、节假日方案、定时预生成——附数据结构和核心源码讲解
java·spring·小程序·uni-app·vue·产品运营·ruoyi
2501_915921431 天前
2026 iOS 上架新趋势 iOS 发布流程模块化
android·ios·小程序·https·uni-app·iphone·webview
窝子面2 天前
uni-app的初体验
uni-app
笨笨狗吞噬者2 天前
【uniapp】微信小程序实现自定义 tabBar
前端·微信小程序·uni-app