uniapp 压缩视频导致视频方向错误如何解决?
在uniapp中使用官方API压缩视频时,发现压缩后的视频方向变成了横屏或倒置(原视频是竖屏拍摄的)。尝试过调整compressVideo的quality参数但无效,请问如何保持压缩后的视频方向与原始视频一致?是否需要通过额外参数或插件处理?
使用uniapp压缩视频时出现方向错误,可以这样解决:
-
检查视频元数据中的旋转信息,使用exifr等库读取视频的Orientation标签
-
在压缩前先校正方向:
// 读取视频方向
const orientation = await getVideoOrientation(videoPath)
// 根据方向参数进行旋转校正
if (orientation !== 1) {
// 使用canvas或ffmpeg进行旋转
await rotateVideo(videoPath, orientation)
}
- 使用uni.compressVideo时添加参数:
uni.compressVideo({
src: videoPath,
quality: 'medium',
compressedPath: tempPath,
success: (res) => {
console.log('压缩成功')
}
})
-
如果问题依旧,建议先用ffmpeg预处理视频方向,再进行压缩
-
也可以考虑使用第三方插件如uni-plugin-video-compressor,它通常能更好地处理方向问题
关键是要在压缩前确保视频方向正确,因为压缩过程可能会丢失元数据信息。
在 UniApp 中压缩视频时出现方向错误,通常是因为压缩过程中丢失了视频的元数据(如旋转信息),导致播放时方向不正确。以下是解决方案:
1. 使用原生插件处理
UniApp 本身对视频压缩支持有限,推荐使用原生插件(如 uni-compress-video
或 uni-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)。