uniapp 压缩视频导致视频方向错误如何解决?

在uniapp中使用官方API压缩视频时,发现压缩后的视频方向变成了横屏或倒置(原视频是竖屏拍摄的)。尝试过调整compressVideo的quality参数但无效,请问如何保持压缩后的视频方向与原始视频一致?是否需要通过额外参数或插件处理?

2 回复

使用uniapp压缩视频时出现方向错误,可以这样解决:

  1. 检查视频元数据中的旋转信息,使用exifr等库读取视频的Orientation标签

  2. 在压缩前先校正方向:

// 读取视频方向
const orientation = await getVideoOrientation(videoPath)

// 根据方向参数进行旋转校正
if (orientation !== 1) {
    // 使用canvas或ffmpeg进行旋转
    await rotateVideo(videoPath, orientation)
}
  1. 使用uni.compressVideo时添加参数:
uni.compressVideo({
    src: videoPath,
    quality: 'medium',
    compressedPath: tempPath,
    success: (res) => {
        console.log('压缩成功')
    }
})
  1. 如果问题依旧,建议先用ffmpeg预处理视频方向,再进行压缩

  2. 也可以考虑使用第三方插件如uni-plugin-video-compressor,它通常能更好地处理方向问题

关键是要在压缩前确保视频方向正确,因为压缩过程可能会丢失元数据信息。


在 UniApp 中压缩视频时出现方向错误,通常是因为压缩过程中丢失了视频的元数据(如旋转信息),导致播放时方向不正确。以下是解决方案:

1. 使用原生插件处理

UniApp 本身对视频压缩支持有限,推荐使用原生插件(如 uni-compress-videouni-video-compressor),它们能更好地保留视频方向信息。

步骤

  • 安装插件:在 UniApp 插件市场搜索并导入视频压缩插件。
  • 调用插件 API 压缩视频,确保插件版本支持方向校正。

示例代码(使用 uni-compress-video)

// 引入插件
const compressor = require('uni-compress-video');

// 压缩视频
compressor.compress({
  src: 'input/video.mp4', // 输入视频路径
  quality: 'medium', // 压缩质量
  success: (res) => {
    console.log('压缩成功:', res.tempFilePath);
    // 处理压缩后的视频
  },
  fail: (err) => {
    console.error('压缩失败:', err);
  }
});

2. 手动校正视频方向

如果压缩后方向仍错误,可在播放前通过 CSS 或 JavaScript 动态调整方向。

CSS 校正示例

<video :src="videoPath" class="rotated-video"></video>
.rotated-video {
  transform: rotate(90deg); /* 根据实际方向调整角度 */
}

3. 检查视频元数据

在压缩前,先获取视频的原始方向信息(如通过 uni.getVideoInfo),并在压缩后应用校正。

示例代码

uni.getVideoInfo({
  src: 'input/video.mp4',
  success: (info) => {
    const rotation = info.rotation; // 获取旋转角度
    // 根据 rotation 在播放时调整方向
  }
});

4. 更新工具和依赖

确保使用最新版本的 UniApp、HBuilderX 及插件,避免旧版本兼容性问题。

总结:

  • 优先使用插件:选择支持方向处理的压缩插件。
  • 手动校正:通过 CSS 或 JS 动态调整方向。
  • 测试不同设备:在 iOS 和 Android 上分别测试,确保兼容性。

如果问题持续,检查视频源文件方向是否正确,或尝试其他压缩工具(如 FFmpeg)。

回到顶部