uniapp uni.choosevideo拿到的视频被旋转了怎么解决？

在使用uniapp的uni.chooseVideo选择视频后，发现部分安卓设备拍摄的视频被自动旋转了90度，导致播放时方向不正确。尝试过用plus.io和canvas处理，但仍有兼容性问题。请问如何通过代码修正视频方向？需要兼容大部分安卓机型，最好能保留原始画质。

2 回复

使用 uni.chooseVideo 获取的视频被旋转，通常是设备录制的视频带有旋转信息（如手机竖屏录制但视频被标记为横屏）。解决方法：

  1. 使用 uni.createVideoContext
    在播放时通过 video 组件的 direction 属性强制修正方向，例如：

    <video :direction="90"></video>

    可尝试 0/90/180/270 等角度值。

  2. 服务端处理
    上传后通过 FFmpeg 等工具自动旋转：

    ffmpeg -i input.mp4 -c copy -metadata:s:v:0 rotate=0 output.mp4

  3. H5 端特殊处理
    部分浏览器可通过 CSS 旋转视频容器：

    video { transform: rotate(90deg); }

建议优先尝试前端修正，若无效再结合服务端处理。


在 UniApp 中，使用 uni.chooseVideo 获取的视频在某些设备（尤其是 iOS）上可能会出现旋转问题，这是因为设备录制的视频可能包含旋转元数据，但部分播放器未正确解析。以下是解决方案：

1. 使用 uni.createVideoContext 手动旋转

如果视频在播放时方向不正确，可以通过 VideoContext 调整旋转角度。

// 选择视频
uni.chooseVideo({
  success: (res) => {
    this.videoUrl = res.tempFilePath;
    // 创建视频上下文
    this.videoContext = uni.createVideoContext('myVideo');
    // 设置旋转角度（例如90度）
    this.videoContext.rotate(90);
  }
});

在模板中绑定视频组件：

<video id="myVideo" :src="videoUrl"></video>

注意：rotate 方法可能不适用于所有平台，需测试兼容性。

2. 使用 FFmpeg 转码处理（后端方案）

如果前端调整无效，可以上传视频到服务器，通过 FFmpeg 转码修正方向：

ffmpeg -i input.mp4 -vf "transpose=1" output.mp4

参数说明：

  • transpose=1：逆时针旋转90度（根据实际情况调整值）。

3. 使用 JavaScript 库（如 FFmpeg.wasm）

在前端通过 FFmpeg.wasm 处理视频（注意性能问题）：

import { FFmpeg } from '@ffmpeg/ffmpeg';
const ffmpeg = new FFmpeg();
// 加载并执行旋转命令（需自行配置）

4. 检查设备方向并动态调整

在录制时通过 uni.onDeviceOrientationChange 监听设备方向，记录旋转信息，播放时应用对应角度。

推荐方案：

  • 优先尝试前端旋转：使用 VideoContext.rotate() 简单调整。
  • 复杂场景用后端处理：确保兼容性，但会增加服务器负担。

根据实际需求选择合适的方法，通常结合设备检测和动态调整能有效解决问题。

回到顶部