uniapp video ios click事件失效如何解决？

在iOS设备上使用uniapp开发时，video组件的click事件不触发，如何解决？试过添加tap事件但依然无效，请问有没有可行的解决方案或替代方案？

2 回复

在iOS中，video组件的click事件可能被系统拦截。解决方法：

  1. 使用@tap替代@click
  2. 给video添加controls属性
  3. 用cover-view覆盖在video上层处理点击
  4. 设置playsinline和webkit-playsinline

推荐优先尝试@tap事件，这是uniapp推荐的处理方式。


在 iOS 设备上，uniapp 的 video 组件点击事件失效通常是由于系统默认行为或层级问题导致的。以下是几种常见解决方案：

1. 使用 controls 属性 + 自定义样式

<template>
  <video 
    :controls="false"
    @click="handleVideoClick"
    class="custom-video"
    src="/static/video.mp4"
  ></video>
</template>

<script>
export default {
  methods: {
    handleVideoClick() {
      console.log('视频被点击')
      // 在这里添加自定义控制逻辑
    }
  }
}
</script>

<style>
.custom-video {
  width: 100%;
  /* 确保视频层级正常 */
  position: relative;
  z-index: 1;
}
</style>

2. 添加透明覆盖层

<template>
  <view class="video-wrapper">
    <video 
      :controls="false"
      src="/static/video.mp4"
    ></video>
    <view class="video-overlay" @click="handleVideoClick"></view>
  </view>
</template>

<style>
.video-wrapper {
  position: relative;
  width: 100%;
}
.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}
</style>

3. 使用 @touchstart 替代

<video 
  @touchstart="handleVideoClick"
  src="/static/video.mp4"
></video>

4. 配置视频参数

<video
  :enable-play-gesture="true"
  :show-play-btn="false"
  :show-center-play-btn="false"
  @click="handleVideoClick"
  src="/static/video.mp4"
></video>

主要建议：

  1. 优先使用方案1，禁用原生控件后自定义点击逻辑
  2. 确保视频组件没有其他元素遮挡
  3. 在真机上进行测试（iOS对视频控件的限制较多）

如果问题仍然存在，可以尝试更新HBuilderX到最新版本，或检查是否有其他全局样式影响了视频组件。

回到顶部