uni-app 视频播放无法旋转(横屏播放视频点击全屏 视频会竖屏播放而且无法旋转)

uni-app 视频播放无法旋转(横屏播放视频点击全屏 视频会竖屏播放而且无法旋转)

操作步骤：

  • 横屏video播放
  • 点击全屏
  • 视频在竖屏播放而且无法旋转
    附：竖屏播放视频全屏后也无法旋转

预期结果：

预期结果 希望视频可以在任意状态下进行旋转，现在竖屏状态下全屏播放也无法自动旋转 很坑 如果是平板的话 支架只能在一个方向横屏 那视频就一直是倒着的。

实际结果：

实际结果 视频播放(全屏)无法旋转

bug描述：

问题描述 视频播放无法旋转(&横屏播放视频点击全屏 视频会竖屏播放而且无法旋转)

复现步骤

  • 横屏video播放
  • 点击全屏
  • 视频在竖屏播放而且无法旋转

预期结果 希望视频可以在任意状态下进行旋转，现在竖屏状态下全屏播放也无法自动旋转 很坑 如果是平板的话 支架只能在一个方向横屏 那视频就一直是倒着的。

实际结果 视频播放(全屏)无法旋转

系统信息:

项目 描述
产品分类 uniapp/App
PC开发环境操作系统 Mac
PC开发环境操作系统版本号 ALL
HBuilderX类型 正式
HBuilderX版本号 3.2.12
手机系统 Android
手机系统版本号 Android 10
手机厂商 华为
手机机型 ALL
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

补充信息 希望快快解决，论坛上也有人提交BUG但是一直没有人回复！


更多关于uni-app 视频播放无法旋转(横屏播放视频点击全屏 视频会竖屏播放而且无法旋转)的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 视频播放无法旋转(横屏播放视频点击全屏 视频会竖屏播放而且无法旋转)的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的uni-app原生组件video在App端的全屏方向控制问题。核心原因是全屏播放时，视频方向依赖于设备的重力感应（屏幕旋转锁定）和原生播放器的默认行为，而uni-app默认未强制接管全屏时的方向。

解决方案如下：

  1. 使用 plus.screen.lockOrientation 强制锁定方向
    在视频全屏事件中，手动锁定为横屏方向（或根据需求动态调整）。示例代码：

    // 在 video 组件的 [@fullscreenchange](/user/fullscreenchange) 事件中处理
onFullscreenChange(e) {
  if (e.detail.fullScreen) {
    // 强制锁定为横屏（landscape-primary）
    plus.screen.lockOrientation('landscape-primary');
  } else {
    // 退出全屏时恢复自动旋转（或锁定竖屏）
    plus.screen.unlockOrientation();
  }
}

  2. 配置 manifest.json 中的屏幕方向
    在 app-plus → distribute → android 下添加 screenOrientation 配置，允许横屏：

    "app-plus": {
  "distribute": {
    "android": {
      "screenOrientation": ["portrait", "landscape"]
    }
  }
}

  3. 使用条件编译处理平台差异
    上述 plus.screen API 仅 App 端有效，需使用条件编译包裹：

    // #ifdef APP-PLUS
plus.screen.lockOrientation('landscape-primary');
// #endif
回到顶部