uni-app video组件在iOS上手势事件、@play事件、@seek事件存在无效和bug

uni-app video组件在iOS上手势事件、@play事件、@seek事件存在无效和bug

开发环境 版本号 项目创建方式
Windows windows10 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：4.13

手机系统：iOS

手机系统版本号：iOS 16

手机厂商：苹果

手机机型：iphone 8plus

页面类型：nvue

vue版本：vue2

打包方式：云端

项目创建方式：HBuilderX

示例代码：

<video id="myVideo" ref="myVideo" vslide-gesture-in-fullscreen="isVsilide" [@play](/user/play)="play"></video>

<script>
export default {  
    data() {  
        return {  
               isVsilide:true,   //是否使用全屏控制音量亮度手势  
        }  
    },  
    methods:{  
        play(e) {  },  
    }  
}
</script>

更多关于uni-app video组件在iOS上手势事件、@play事件、@seek事件存在无效和bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app video组件在iOS上手势事件、@play事件、@seek事件存在无效和bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在使用 uni-app 开发跨平台应用时，video 组件在 iOS 平台上确实存在一些已知的手势事件、[@play](/user/play) 事件和 [@seek](/user/seek) 事件的无效或 bug 问题。以下是一些常见问题及其可能的解决方案：

1. 手势事件无效

在 iOS 设备上，video 组件的默认行为可能会覆盖或干扰自定义手势事件。例如，双指缩放、滑动等手势可能无法正常触发。

解决方案：

  • 禁用默认手势：可以通过设置 gesture 属性为 false 来禁用默认的手势控制。
    <video :gesture="false"></video>
  • 自定义手势：如果需要自定义手势，可以考虑使用 touchstart、touchmove、touchend 等原生事件来手动实现手势控制。

2. @play 事件无效

在 iOS 设备上，[@play](/user/play) 事件有时可能无法正常触发，尤其是在自动播放或通过代码控制播放时。

解决方案：

  • 手动触发播放：尝试在 mounted 或 ready 事件中手动调用 play() 方法。
    this.$refs.video.play();
  • 监听 timeupdate 事件：如果 [@play](/user/play) 事件无法触发，可以尝试监听 timeupdate 事件来判断视频是否开始播放。
    <video [@timeupdate](/user/timeupdate)="onTimeUpdate"></video>

    methods: {
  onTimeUpdate(event) {
    if (event.target.currentTime > 0) {
      console.log('Video is playing');
    }
  }
}

3. @seek 事件无效

在 iOS 设备上，[@seek](/user/seek) 事件有时可能无法正常触发，尤其是在用户拖动进度条时。

解决方案：

  • 监听 timeupdate 事件：与 [@play](/user/play) 事件类似，可以监听 timeupdate 事件来手动判断用户是否进行了拖动操作。
    <video [@timeupdate](/user/timeupdate)="onTimeUpdate"></video>

    methods: {
  onTimeUpdate(event) {
    // 判断是否有拖动行为
    if (this.lastTime !== event.target.currentTime) {
      this.lastTime = event.target.currentTime;
      console.log('Video seeked');
    }
  }
}
  • 使用 seeked 事件：尝试使用 seeked 事件来代替 [@seek](/user/seek) 事件。
    <video [@seeked](/user/seeked)="onSeeked"></video>

    methods: {
  onSeeked(event) {
    console.log('Video seeked');
  }
}

4. 其他注意事项

  • iOS 自动播放限制：iOS 设备对自动播放有严格的限制，通常需要用户交互（如点击）才能触发播放。确保在用户交互后再调用 play() 方法。
  • 全屏播放问题：在 iOS 设备上，video 组件可能会强制进入全屏播放模式。可以通过设置 x5-playsinline 或 webkit-playsinline 属性来尝试在页面内播放。
    <video :webkit-playsinline="true" :playsinline="true"></video>
回到顶部