uni-app video组件在苹果端报bug，相册中选择视频播放会自动旋转90度

uni-app video组件在苹果端报bug，相册中选择视频播放会自动旋转90度

信息类别 信息内容
产品分类 uniapp/App
PC开发环境 Windows
PC版本号 macOS Big sur 11.2
HBuilderX 正式
HBuilderX版本号 3.1.7
手机系统 全部
手机厂商 华为
页面类型 vue
打包方式 云端
项目创建方式 HBuilderX

测试过的手机：

  • iphone 11max pro
  • 安卓 vivo x9s

操作步骤： bug复现切记使用原相机拍摄的视频没有经过第三方剪辑软件处理过的。 我也很纳闷为什么相机拍摄的视频用video播放就异常，而经过第三方剪辑软件剪辑过的视频导入video播放又是正常的 ，初步怀疑是不是编码问题。 异常的视频在苹果端不能使用object-fit属性 会出现裁剪，拉伸。安卓端正常 望排查 已上传问题代码

预期结果： 视频处于正常方向

实际结果： 视频自动旋转90度

bug描述： 在苹果端中在相册选择视频用video进行播放会视频自动旋转90度。
安卓端也异常，播放视频正常，当你暂停视频的时候也会自动旋转90度

苹果端异常
安卓端异常


更多关于uni-app video组件在苹果端报bug，相册中选择视频播放会自动旋转90度的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

代码在这 上传错了

更多关于uni-app video组件在苹果端报bug，相册中选择视频播放会自动旋转90度的实战教程也可以访问 https://www.itying.com/category-93-b0.html


把你出问题的视频 也传一下啊

回复 天生DR: 只要是苹果手机原生相机拍的视频，都会出现。且视频没有经过任何第三方软件处理过

苹果手机拍摄的视频格式是mov，uni-app的video组件支持本地视频(mp4/flv)、网络视频地址（mp4/flv/m3u8）及流媒体（rtmp/hls/rtsp）；mov格式视频在nvue页面下会变小，vue页面会旋转，楼主问题解决了没？我也在烦这个问题

这BUg 被修复了 你升级试试

这是iOS系统对视频EXIF方向信息的处理差异导致的常见问题。iOS相册中的视频包含旋转元数据，但部分视频解码器会忽略这些信息。

解决方案：

  1. 使用uni.chooseVideo时设置compressed:false获取原始文件
  2. 在video组件中添加:style="{ transform: rotateFix }"，通过CSS旋转校正
  3. 监听视频元数据加载，动态计算旋转角度：
onLoad(e) {
  const video = e.detail;
  const { rotation = 0 } = video;
  this.rotateValue = rotation === 90 ? 'rotate(90deg)' : 'none';
}
回到顶部