uni-app 升级hBuilderx 4.36.2024112817后 ios手机竖向拍摄视频变成横向问题

开发环境	版本号	项目创建方式
Windows	Windows 10	HBuilderX
	专业版

产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：Windows 10 专业版

HBuilderX类型：正式

HBuilderX版本号：4.36

手机系统：iOS

手机系统版本号：iOS 18

手机厂商：苹果

手机机型：ipone14 pro

页面类型：vue

vue版本：vue3

打包方式：云端

示例代码：

let _that = this
let cmr = plus.camera.getCamera();
let res = cmr.supportedVideoResolutions[0];
let fmt = cmr.supportedVideoFormats[0];
cmr.startVideoCapture(function(path) {
_that.resolveLocalFileSystemURL(path, id, 'video');
},
function(error) {},
{
resolution: res,
format: fmt,
videoMaximumDuration: 30
},
);

操作步骤：

hbuilderx从4.29.2024093009升级到4.36.2024112817，打包IOS包。

预期结果：

拍摄的视频可以正常显示。

实际结果：

拍摄的视频自动进行了旋转90度

bug描述：

由于ipone16拍摄视频，无法获取到视频，所以升级了hbuilderx 4.36.2024112817，升级后此问题解决。

但是出现了新的问题，竖向拍摄视频，获取的视频是横向的，横向拍摄视频，获取到的是竖向的，照片没有此问题。

sinazl 1楼•16 小时前

针对您提到的在升级hBuilderx到4.36.2024112817版本后，iOS手机上竖向拍摄的视频在播放时变成横向的问题，这通常涉及到视频的方向元数据（orientation metadata）处理不当。在iOS设备上，竖向拍摄的视频往往会包含旋转元数据，以指示视频应如何正确显示。如果在播放时没有正确解析或应用这些元数据，就可能导致视频显示方向错误。

以下是一个可能的解决方案，它涉及到在uni-app中处理视频的方向元数据。由于uni-app主要使用Vue.js进行开发，并且依赖于原生插件或API来处理视频，我们可能需要结合原生代码（如Objective-C或Swift）来修正视频方向。不过，这里提供一个更通用的思路，通过JavaScript在前端尽可能调整，虽然最终解决方案可能需要结合原生开发。

获取视频方向信息：首先，确保能够获取到视频的旋转元数据。这通常需要在原生层面实现，但可以通过插件或自定义组件暴露给JavaScript层。
调整CSS样式：一旦知道了视频的正确方向，可以通过CSS transform属性来调整视频的显示方向。例如，如果视频需要顺时针旋转90度，可以这样设置：

<template>
  <view class="video-container">
    <video :src="videoSrc" @loadedmetadata="onLoadedMetadata" class="video"></video>
  </view>
</template>

<script>
export default {
  data() {
    return {
      videoSrc: 'path/to/your/video.mp4',
      transformStyle: ''
    };
  },
  methods: {
    onLoadedMetadata(event) {
      // 假设这里通过某种方式获取到了视频的旋转角度，存储在rotationDegree中
      let rotationDegree = this.getRotationDegree(); // 需要实现这个函数
      this.transformStyle = `transform: rotate(${rotationDegree}deg);`;
    }
  }
};
</script>

<style>
.video-container {
  overflow: hidden;
  position: relative;
}
.video {
  width: 100%;
  height: auto;
  /* 动态应用旋转样式 */
  :style="{ transformStyle }";
}
</style>

注意：getRotationDegree函数需要实现，它应该根据视频的元数据返回正确的旋转角度。这通常涉及原生代码，可能需要创建一个原生插件来获取这些信息。

原生插件开发：如果CSS调整不足以解决问题，或者需要更精确的控制，考虑开发一个原生插件来直接处理视频的方向。这涉及到iOS的原生开发知识，包括使用AVFoundation框架来读取和处理视频的方向元数据。

由于直接给出完整的原生代码超出了这个回复的范围，建议查阅uni-app和iOS开发文档，了解如何创建原生插件以及如何使用AVFoundation处理视频方向。