uni-app ios端 video组件全屏播放问题：横屏固定，无法根据视频宽高比自动切换横屏或竖屏

uni-app ios端 video组件全屏播放问题：横屏固定，无法根据视频宽高比自动切换横屏或竖屏

开发环境 版本号 项目创建方式
Windows win10 64 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：3.1.7

手机系统：iOS

手机系统版本号：iOS 12.4

手机厂商：苹果

手机机型：iphone5s

页面类型：vue

打包方式：云端

示例代码：
测试视频：http://mediaminnanyu.oss-cn-shenzhen.aliyuncs.com/up/20210326/1616726016338wC6jS.mp4

操作步骤：
如图

预期结果：
ios端 video组件 应该跟安卓端对齐，全屏时应该根据视频宽高比自动横屏或竖屏，或者提供获取视频宽高比的api啊

实际结果：
如图

bug描述：
ios端 video组件 全屏都是横屏播放，无法根据视频宽高比自动横屏或者竖屏

更多关于uni-app ios端 video组件全屏播放问题：横屏固定，无法根据视频宽高比自动切换横屏或竖屏的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

Android端全屏也是横屏啊

更多关于uni-app ios端 video组件全屏播放问题：横屏固定，无法根据视频宽高比自动切换横屏或竖屏的实战教程也可以访问 https://www.itying.com/category-93-b0.html


全屏不应该是横屏吗？

回复 天生DR: 他的意思不是 竖屏视频 全屏也应该是 竖屏 吗…我理解错了?

回复 DCMarvel: 回错了 我要回他呢 基本市面上所有的视频软件 无论是横屏竖屏 点击了全屏按钮 都是横屏

回复 天生DR: 嗯,有direction 0他可能不知道

安卓端不都是横屏啊，会根据视频宽高比改变的，至少小米手机是这样的

全屏不应该是横屏吗？

在uni-app中，iOS端的video组件全屏播放时确实存在横屏固定的问题，这与系统底层实现有关。iOS的默认全屏行为会强制横屏，而Android则支持根据视频宽高比自动切换方向。

目前uni-app的video组件未直接提供自动横竖屏切换的配置选项。你可以尝试以下方法：

  1. 使用plus.screen.lockOrientation接口手动控制屏幕方向：

    // 获取视频宽高比后动态设置
const video = this.$refs.video;
video.addEventListener('loadedmetadata', function() {
  const ratio = video.videoWidth / video.videoHeight;
  if (ratio > 1) {
    plus.screen.lockOrientation('landscape');
  } else {
    plus.screen.lockOrientation('portrait');
  }
});

  2. 通过条件编译区分平台处理：

    // #ifdef APP-PLUS
if (uni.getSystemInfoSync().platform === 'ios') {
  // iOS特定处理
}
// #endif
回到顶部