uniapp app视频假全屏问题如何解决？

在uniapp开发的app中，视频播放时点击全屏按钮会进入假全屏状态（实际是页面拉伸），无法真正全屏显示。尝试过设置video组件的fullscreen-mode属性为true，但依然无效。请问如何实现真正的全屏播放效果？需要兼容iOS和Android平台。

2 回复

在video标签中添加show-fullscreen-btn属性并设为false，再自定义全屏按钮，通过videoContext.requestFullScreen()方法控制全屏即可。


在UniApp中，视频假全屏问题通常是由于视频组件在部分平台（如iOS）默认使用系统播放器，导致全屏时无法覆盖状态栏或导航栏。以下是解决方案：

  1. 使用自定义全屏控制：
    避免使用默认全屏，通过动态样式实现全屏效果。
    示例代码：

    <template>
  <view>
    <video 
      :src="videoUrl" 
      :style="isFullScreen ? fullScreenStyle : normalStyle"
      @fullscreenchange="onFullscreenChange"
    ></video>
    <button @click="toggleFullScreen">切换全屏</button>
  </view>
</template>
<script>
export default {
  data() {
    return {
      videoUrl: 'https://example.com/sample.mp4',
      isFullScreen: false,
      normalStyle: { width: '100%', height: '300px' },
      fullScreenStyle: { 
        position: 'fixed', 
        top: 0, 
        left: 0, 
        width: '100vw', 
        height: '100vh', 
        zIndex: 9999 
      }
    }
  },
  methods: {
    toggleFullScreen() {
      this.isFullScreen = !this.isFullScreen;
    },
    onFullscreenChange(e) {
      // 处理系统全屏事件（可选）
    }
  }
}
</script>

  2. 配置App平台特定设置：
    在 pages.json 中禁用原生导航栏，避免遮挡：

    {
  "path": "video-page",
  "style": {
    "navigationBarTitleText": "视频",
    "app-plus": {
      "titleNView": false  // 隐藏导航栏
    }
  }
}

  3. 使用插件或原生开发：
    若仍需系统全屏，可尝试插件（如uni-app视频增强插件）或编写原生代码（需平台特定配置）。

注意事项：

  • 自定义全屏时需处理横竖屏适配。
  • 测试iOS和Android的兼容性。
  • 真机调试以确认效果。

通过以上方法，可解决假全屏问题，确保视频覆盖整个屏幕。

回到顶部