已解决 微信小程序uniapp使用video的时候全屏方法@fullscreenchange会执行两次

原因:fullscreenchange事件会在进入全屏和退出全屏时各触发一次。所以全屏切换期间会触发两次该事件。

解决方案:

 

js

Copy code

  1. 在监听fullscreenchange事件时,使用变量进行防抖处理。比如设置一个变量来记录上一次的全屏状态,只有当状态真正发生改变时才执行处理逻辑。
    		fullScreen(e) {
    				let lastFullscreen = false;
    				const isFullscreen = e.detail.fullScreen
    				console.log('lastFullscreen:', lastFullscreen, isFullscreen)
    				if (isFullscreen !== lastFullscreen && lastFullscreen == true) {
    					// 状态改变,执行处理逻辑
    					if (!isFullscreen) {
    						lastFullscreen = false;
    						console.log('lastFullscreen:', lastFullscreen, isFullscreen)
    						this.videoContext.requestFullScreen();
    					} else {
    						lastFullscreen = true;
    						console.log('lastFullscreen:', lastFullscreen, isFullscreen)
    						this.videoContext.exitFullScreen();
    					}
    
    				}
    			},

  2. 使用setTimeout及清除定时器的方式防抖,只在fullscreen状态稳定后的一次事件中处理。
  3. 在微任务队列中处理事件回调,这样可以合并连续的fullscreenchange事件。
  4. 根据全屏切换的场景,通过代码直接控制只监听必要的全屏事件。比如只在视频全屏时才监听。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值