uni-app 全屏播放视频时 点不到返回按钮

uni-app 全屏播放视频时 点不到返回按钮

项目信息 详情
产品分类 uniapp/App
PC开发环境 Windows
PC开发环境版本 Windows 10 專業版
HBuilderX类型 正式
HBuilderX版本 4.08
手机系统 iOS
手机系统版本 iOS 17
手机厂商 苹果
手机机型 iPhone 13
页面类型 nvue
Vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

操作步骤：

  • IOS 17.3.1 全屏竖屏播放视频 点不到上面的返回按钮

预期结果：

  • 应该退出视频全屏

实际结果：

  • 点不到 或者点了没反应 详见视频

bug描述：

  • 竖屏全屏播放时 点左上角的返回 会点不到

WeChat_20240426091349.zip


更多关于uni-app 全屏播放视频时 点不到返回按钮的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 全屏播放视频时 点不到返回按钮的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 Uni-app 中全屏播放视频时，如果无法点击返回按钮，可能是由于全屏模式下某些元素被遮挡或事件处理不当导致的。以下是一些可能的解决方案：

1. 使用 video 组件的全屏事件

Uni-app 的 video 组件提供了全屏事件 fullscreenchange，你可以通过监听这个事件来处理全屏状态下的逻辑。

<template>
  <view>
    <video
      id="myVideo"
      src="https://example.com/video.mp4"
      controls
      @fullscreenchange="onFullscreenChange"
    ></video>
  </view>
</template>

<script>
export default {
  methods: {
    onFullscreenChange(e) {
      if (e.detail.fullScreen) {
        // 进入全屏时的处理
        console.log('进入全屏');
      } else {
        // 退出全屏时的处理
        console.log('退出全屏');
      }
    }
  }
}
</script>

2. 自定义返回按钮

如果你在全屏模式下无法点击默认的返回按钮，可以尝试自定义一个返回按钮，并在全屏时显示它。

<template>
  <view>
    <video
      id="myVideo"
      src="https://example.com/video.mp4"
      controls
      @fullscreenchange="onFullscreenChange"
    ></video>
    <view v-if="isFullScreen" class="custom-back-button" @click="exitFullScreen">
      返回
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isFullScreen: false
    };
  },
  methods: {
    onFullscreenChange(e) {
      this.isFullScreen = e.detail.fullScreen;
    },
    exitFullScreen() {
      const videoContext = uni.createVideoContext('myVideo');
      videoContext.exitFullScreen();
    }
  }
}
</script>

<style>
.custom-back-button {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 10px;
  border-radius: 5px;
}
</style>

3. 检查 z-index

确保你的返回按钮的 z-index 值足够高，以便它在全屏模式下显示在其他元素之上。

4. 使用 cover-view 和 cover-image

如果你在小程序中使用，可以使用 cover-view 和 cover-image 来确保元素在全屏模式下显示。

<template>
  <view>
    <video
      id="myVideo"
      src="https://example.com/video.mp4"
      controls
      @fullscreenchange="onFullscreenChange"
    ></video>
    <cover-view v-if="isFullScreen" class="custom-back-button" @click="exitFullScreen">
      返回
    </cover-view>
  </view>
</template>

5. 使用 uni.navigateBack

如果你只是想返回上一个页面，可以使用 uni.navigateBack 方法。

exitFullScreen() {
  uni.navigateBack();
}
回到顶部