uni-app中video标签的@fullscreenchange()事件一直执行

uni-app中video标签的@fullscreenchange()事件一直执行

开发环境 版本号 项目创建方式
Windows win10 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：win10

HBuilderX类型：正式

HBuilderX版本号：3.4.15

手机系统：iOS

手机系统版本号：iOS 15

手机厂商：苹果

手机机型：iPhone SE 2

页面类型：nvue

vue版本：vue2

打包方式：云端

操作步骤：
视频播放后，点击底部控制栏的全屏按钮后视频全屏播放，在点击底部控制栏的退出全屏按钮，然后video标签的[@fullscreenchange](/user/fullscreenchange)事件会一直执行，video标签绑定的click事件不执行

预期结果：
video标签的[@fullscreenchange](/user/fullscreenchange)只执行一次，绑定的click事件能执行

实际结果：
video标签的[@fullscreenchange](/user/fullscreenchange)一直执行，绑定的click事件不执行

bug描述：
video标签的[@fullscreenchange](/user/fullscreenchange)事件一直执行

更多关于uni-app中video标签的@fullscreenchange()事件一直执行的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

项目地址 https://github.com/18438917513/favicon/tree/master

更多关于uni-app中video标签的@fullscreenchange()事件一直执行的实战教程也可以访问 https://www.itying.com/category-93-b0.html


input 那个项目吗？

能够提供一个可以稳定复现的demo 压缩传到附件

回复 天生DR: 实例已上传

实例

检查一下你的代码逻辑吧 你一直在调 exitFullScreen 自然响应这个回调了

回复 DCloud_iOS_DJXAndroid没有这个问题

回复 天生DR: 已经解决了

这是一个已知的uni-app在iOS平台上的兼容性问题。在nvue页面中使用video组件的@fullscreenchange事件时，iOS设备上可能会出现事件重复触发的情况。

建议的解决方案：

  1. 使用防抖函数控制事件触发频率：
let timer = null
function handleFullscreenChange(e) {
  clearTimeout(timer)
  timer = setTimeout(() => {
    console.log('全屏状态变化', e.detail.fullscreen)
    // 你的业务逻辑
  }, 200)
}
  1. 对于click事件不执行的问题，可以尝试使用@tap事件替代：
<video [@tap](/user/tap)="handleVideoClick"></video>
  1. 如果问题仍然存在，可以考虑使用条件编译针对iOS平台做特殊处理：
// #ifdef APP-PLUS && IOS
// iOS特殊处理
// #endif
回到顶部