uniapp video组件全屏导致页面横竖错乱问题如何解决？

在uniapp中使用video组件播放视频时，当全屏播放后退出全屏，页面布局会出现横竖屏错乱的情况。尝试过设置pageOrientation和screenOrientation配置，但问题依然存在。请问如何解决video组件全屏导致的页面方向错乱问题？

2 回复

在uniapp中，video组件全屏时出现横竖屏错乱，可尝试以下解决方案：

  1. 配置页面方向
    在 pages.json 中为对应页面单独配置屏幕方向：

    {
  "path": "pages/video/index",
  "style": {
    "pageOrientation": "auto" // 或强制设为 "portrait"/"landscape"
  }
}

  2. 监听全屏事件
    通过 @fullscreenchange 事件动态控制页面方向：

    onFullscreenChange(e) {
  if (e.detail.fullScreen) {
    plus.screen.lockOrientation('landscape'); // 横屏
  } else {
    plus.screen.lockOrientation('portrait'); // 恢复竖屏
  }
}

  3. CSS修复
    全屏时强制设置视频容器样式：

    .video-container {
  transform: rotate(0deg);
  position: fixed;
  top: 0;
  left: 0;
  width: 100vh;
  height: 100vw;
}

  4. 注意事项

    • 部分安卓机需在 manifest.json 开启屏幕旋转权限
    • 使用 HBuilderX 3.2.5+ 版本避免已知兼容性问题
    • 真机调试时注意系统自动旋转开关状态

优先推荐方案1+2组合使用，可覆盖大部分机型异常情况。


在UniApp中，使用video组件全屏时可能导致页面横竖屏错乱，通常是因为全屏后设备方向改变，但页面未正确适配。以下是解决方案：

1. 监听全屏事件并控制页面方向

在video组件上监听全屏事件，通过plus.screen锁定屏幕方向。示例代码：

<video 
  :src="videoUrl" 
  @fullscreenchange="onFullscreenChange"
></video>

<script>
export default {
  methods: {
    onFullscreenChange(e) {
      if (e.detail.fullScreen) {
        // 进入全屏时锁定横屏
        plus.screen.lockOrientation("landscape");
      } else {
        // 退出全屏时恢复竖屏
        plus.screen.lockOrientation("portrait");
      }
    }
  }
}
</script>

2. 配置页面支持横竖屏

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

{
  "path": "pages/video/index",
  "style": {
    "app-plus": {
      "orientation": ["portrait", "landscape"] // 支持竖屏和横屏
    }
  }
}

3. 处理CSS样式适配

全屏时视频可能拉伸，添加CSS控制视频比例：

video {
  width: 100%;
  height: auto;
  object-fit: contain; /* 保持比例，避免变形 */
}

注意事项：

  • 平台差异：plus.screen仅适用于App端（HBuilderX打包），H5和小程序需使用各自API（如H5的screen.orientation）。
  • 测试：在真机上测试，模拟器可能无法完全复现方向问题。

通过以上步骤，可解决全屏导致的页面错乱问题。

回到顶部