uniapp video全屏时自动横屏问题如何解决？

在uniapp中，当使用video组件全屏播放视频时，如何实现自动横屏功能？目前全屏后仍然是竖屏显示，影响观看体验。希望了解是否有配置参数或API可以实现自动横屏，或者需要额外编写代码来强制横屏？求解决方案或示例代码。

2 回复

在uniapp中，video全屏时自动横屏可通过以下方式解决：

  1. 在pages.json中配置页面方向：
"pageOrientation": "auto"
  1. 使用plus.screen锁定方向：
plus.screen.lockOrientation("landscape-primary");
  1. 或通过CSS强制横屏：
video {
  transform: rotate(90deg);
}

推荐使用第1或第2种方法。


在 UniApp 中，当 video 组件全屏时，默认会强制横屏显示，这可能导致页面布局错乱或用户体验不佳。以下是几种解决方法：

1. 使用 page-orientation 属性（推荐）

在 video 组件中添加 page-orientation 属性，设置为 "auto" 或 "portrait"，以控制全屏时的屏幕方向：

<video 
  src="video.mp4" 
  page-orientation="auto" 
  controls 
  @fullscreenchange="onFullscreenChange"
></video>
  • page-orientation="auto"：允许系统自动处理方向（部分设备可能仍横屏）。
  • page-orientation="portrait"：强制竖屏（部分安卓设备可能不兼容）。

2. 监听全屏事件并手动控制方向

通过 @fullscreenchange 事件监听全屏状态变化，结合 uni.setScreenOrientation API 动态设置方向：

methods: {
  onFullscreenChange(e) {
    if (e.detail.fullScreen) {
      // 进入全屏时强制竖屏
      uni.setScreenOrientation({ orientation: 'portrait' });
    } else {
      // 退出全屏时恢复自动方向
      uni.setScreenOrientation({ orientation: 'auto' });
    }
  }
}

在 pages.json 中配置页面支持竖屏：

{
  "path": "video-page",
  "style": {
    "pageOrientation": "portrait"
  }
}

3. 使用原生导航栏避免冲突

在全屏页面隐藏导航栏，减少布局干扰：

{
  "path": "video-page",
  "style": {
    "navigationBarTitleText": "视频",
    "navigationStyle": "custom"
  }
}

注意事项：

  • 兼容性：page-orientation 和 setScreenOrientation 在部分安卓设备或低版本系统中可能无效。
  • 用户体验：强制竖屏可能影响视频观看体验，建议根据实际需求选择。
  • 测试验证：需在真机测试不同平台（iOS/Android）的表现。

通过上述方法，可有效控制 video 全屏时的横屏问题。推荐优先使用 page-orientation 属性，若效果不理想再结合事件监听动态调整方向。

回到顶部