当前位置: 首页 > article >正文

解决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
	}
},

 

 


http://www.kler.cn/a/312547.html

相关文章:

  • 离散化C++
  • Windows系统本地部署deepseek 更改目录
  • leetcode——合并K个有序链表(java)
  • 如何将DeepSeek部署到本地电脑
  • 360大数据面试题及参考答案
  • Origami Agents:AI驱动的销售研究工具,助力B2B销售团队高效增长
  • C++——用选择法对10个数值进行排序。
  • 即时通讯框架MobileIMSDK的H5端开发快速入门
  • Python数据分析案例60——扩展变量后的神经网络风速预测(tsfresh)
  • 系统架构设计师:系统架构设计
  • etcd二次封装
  • Docker上安装mysql
  • MySQL在大数据场景应用
  • 代码随想录训练营 Day60打卡 图论part10 SPFA算法 Bellman-Ford 之判断负权回路 Bellman-Ford 之单源有限最短路
  • vue常用业务场景
  • 通过springcloud gateway优雅的进行springcloud oauth2认证和权限控制
  • Python编码系列—Python代理模式:为对象赋予超能力的魔法
  • QTcpSocket和QLocalSocket详解
  • 【网络编程】socket套接字|sockaddr|sockaddr_in|通信过程
  • 《深度学习》—— 神经网络模型中的损失函数及正则化惩罚和梯度下降
  • 如何搭建虚拟机Ubuntu?
  • icpc江西:L. campus(dij最短路)
  • el-input 只能输入数字和一个小数点,或者只能输入两位小数
  • OpenHarmony(鸿蒙南向开发)——小型系统内核(LiteOS-A)【时间管理】
  • 探索自闭症寄宿学校的专属教育模式
  • java原子操作类