IOS手机使用 uni-app 的 uni.chooseVideo 进行录制视频，视频被旋转了90°

IOS手机使用 uni-app 的 uni.chooseVideo 进行录制视频，视频被旋转了90°

示例代码：

<template>  
    <root-view>  
             <button @click="chooseVideo">选择视频</button>  

             <video :src="videoSrc" controls></video>  
    </root-view>  
</template>  

<script>  

    export default {  
            data() {  
                    return {  
                            videoSrc: '',  
                    };  
            },  
            methods: {  
                    chooseVideo() {  
                            uni.chooseVideo({  
                                    sourceType: ['camera', 'album'],  
                                    success: (res) => {  
                                            this.videoSrc = res.tempFilePath;  
                                    }  
                            });  
                    }  

            }  
    };  
</script>

操作步骤：

点击按钮旋转拍摄，竖着手机拍摄视频，录制完成后，显示的视频会被旋转90°

预期结果：

手机怎么拍就这么显示录制内容

实际结果：

录制后的视频被旋转了90°

bug描述：

ios手机, 竖着手机录制视频后，返回的预览视频会被旋转90°

开发环境 版本号 项目创建方式
Windows 11 HBuilderX
HBuilderX 4.52
手机系统 版本号
iOS iOS 17
手机厂商
苹果
手机机型
iPhone15
页面类型
vue vue3

更多关于IOS手机使用 uni-app 的 uni.chooseVideo 进行录制视频，视频被旋转了90°的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

在线等

更多关于IOS手机使用 uni-app 的 uni.chooseVideo 进行录制视频，视频被旋转了90°的实战教程也可以访问 https://www.itying.com/category-93-b0.html


求问找到解决方案了吗

有人遇到同样的问题么？有什么好的方法处理下？

我也遇到了同样问题，麻烦楼主有解决方案了回复下我

uni.chooseVideo 把这个属性调整为false可以解决

设置 compressed 为 false 并不行啊，还会出现导出文件失败！uniApp的SDK，应该是使用TZImagePickerController去选择视频的吧，我在iOS原生上，发现选出来的视频，并不会旋转。

请问找到解决方案了吗

回复 DemoPatrick: 官方不给解决，那就用原声提供类似uni.chooseVideo的API给uni调用。

这是iOS设备上常见的视频方向问题。iOS设备拍摄的视频会带有EXIF方向信息，但部分播放器不会自动处理这个信息。

解决方案：

  1. 使用CSS强制修正视频方向：
video {
  transform: rotate(90deg);
  transform-origin: center;
}
  1. 或者使用uni.createVideoContext来处理：
success: (res) => {
  this.videoSrc = res.tempFilePath;
  this.$nextTick(() => {
    const videoContext = uni.createVideoContext('myVideo');
    videoContext.requestFullScreen({direction: 90});
  })
}
  1. 也可以考虑使用uni.compressVideo压缩视频时修正方向：
uni.compressVideo({
  src: res.tempFilePath,
  quality: 'high',
  success: (compressed) => {
    this.videoSrc = compressed.tempFilePath;
  }
})
回到顶部