uni-app video 全屏模式缺少返回按钮

uni-app video 全屏模式缺少返回按钮

# 操作步骤：
- 随便放个视频就行

# 预期结果：
- 希望video 全屏模式有返回按钮

# 实际结果：
- video 全屏模式没有返回按钮

# bug描述：
- video 全屏模式没有返回按钮
开发环境 版本号 项目创建方式
Windows 9.1.0.228 HBuilderX
Android 9.0
华为 p10

更多关于uni-app video 全屏模式缺少返回按钮的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app video 全屏模式缺少返回按钮的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中，video组件全屏模式缺少返回按钮是常见问题。这是因为不同设备和浏览器的全屏实现方式不同，原生video组件的全屏控制通常由系统或浏览器决定，而非uni-app框架控制。

解决方案：

  1. 使用自定义播放器控件：通过controls属性设置为false，自行实现全屏按钮和退出逻辑
  2. 监听全屏事件：使用@fullscreenchange事件，在全屏时显示自定义返回按钮
  3. 考虑使用第三方插件：如vue-video-player等，提供更统一的全屏控制

代码示例：

<template>
  <view>
    <video 
      :controls="false"
      @fullscreenchange="onFullscreenChange"
      ref="video"
    ></video>
    <button v-if="isFullscreen" @click="exitFullscreen">返回</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isFullscreen: false
    }
  },
  methods: {
    onFullscreenChange(e) {
      this.isFullscreen = e.detail.fullScreen
    },
    exitFullscreen() {
      this.$refs.video.exitFullScreen()
    }
  }
}
</script>
回到顶部