uni-app IOS下video direction属性无效无法自动识别竖版视频

uni-app IOS下video direction属性无效无法自动识别竖版视频

开发环境 版本号 项目创建方式
Windows win11 HBuilderX

产品分类：uniapp/App
PC开发环境操作系统：Windows
PC开发环境操作系统版本号：win11
HBuilderX类型：正式
HBuilderX版本号：4.57
手机系统：iOS
手机系统版本号：iOS 18
手机厂商：苹果
手机机型：iphone Xs Max
页面类型：vue
vue版本：vue2
打包方式：云端

示例代码：

<video id="myVideo" v-if="item.url" :src="item.url" autoplay="true" style="width: 100%;" [@error](/user/error)="videoErrorCallback" show-mute-btn="true" controls></video>  
"screenOrientation" : [  
"portrait-primary",  
"portrait-secondary",  
"landscape-primary",  
"landscape-secondary",  
],

更多关于uni-app IOS下video direction属性无效无法自动识别竖版视频的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

提供一个单页面的源码吧。ios 模拟器是否正常，其他 iPhone 是否正常？

更多关于uni-app IOS下video direction属性无效无法自动识别竖版视频的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中，iOS平台下video组件的direction属性确实存在兼容性问题，目前无法自动识别竖版视频方向。这是由于iOS原生video播放器的限制导致的。

建议的解决方案：

  1. 使用uni.createVideoContext手动控制视频方向：
const videoContext = uni.createVideoContext('myVideo')
videoContext.requestFullScreen({direction: 90}) // 90表示竖屏
  1. 或者尝试通过CSS强制旋转视频：
video {
  transform: rotate(90deg);
  transform-origin: center center;
  width: 100vh;
  height: 100vw;
}
回到顶部