uniapp 横屏全屏播放后退出变成竖屏问题如何解决？

在uniapp中，横屏全屏播放视频后退出全屏时，页面会自动切换回竖屏模式，导致界面显示异常。如何保持退出全屏后仍维持横屏状态？需要兼容iOS和Android平台，求具体解决方案或代码示例。

2 回复

在uniapp中，横屏全屏播放后退出时，可以通过监听全屏状态变化，在退出时强制设置屏幕方向为竖屏来解决。使用plus.screen.lockOrientation('portrait-primary')锁定竖屏。


在 UniApp 中，横屏全屏播放视频后退出时出现竖屏问题，通常是由于页面方向未正确恢复导致的。以下是解决方案：

1. 使用 plus.screen 控制屏幕方向

在视频播放器全屏时锁定横屏，退出时恢复竖屏。示例代码如下：

// 进入全屏时锁定横屏
onFullscreenChange(e) {
  if (e.fullScreen) {
    // 横屏
    plus.screen.lockOrientation("landscape");
  } else {
    // 退出全屏时恢复竖屏
    plus.screen.lockOrientation("portrait");
  }
}

2. 监听视频播放器事件

在视频组件中监听全屏变化事件：

<video 
  :fullscreen-change="onFullscreenChange"
  src="video.mp4"
></video>

3. 页面生命周期处理

在页面 onHide 或 onUnload 时强制恢复竖屏：

onUnload() {
  plus.screen.lockOrientation("portrait");
}

注意事项：

  • 确保使用 plus.screen API 前检查运行环境（仅 App 端有效）。
  • 测试不同机型，部分 Android 设备可能需要额外配置。
  • 使用 H5 或小程序时需调用各自平台的 API（如 H5 的 screen.orientation）。

通过以上方法，可解决退出全屏后屏幕方向错误的问题。

回到顶部