uni-app uni.compressVideo压缩视频后 无论原视频orientation是什么 压缩后orientation方向一直为up

发布于 1周前 作者 sinazl 来自 Uni-App

uni-app uni.compressVideo压缩视频后 无论原视频orientation是什么 压缩后orientation方向一直为up

操作步骤

调用视频压缩,对比前后无论原视频orientation是什么,压缩后orientation方向一直为up

预期结果

压缩后orientation与压缩前一样,否则视频被翻转了

实际结果

压缩后orientation方向一直为up

bug描述

uni.compressVideo压缩视频后 无论原视频orientation是什么,压缩后orientation方向一直为up

开发环境及版本信息

项目创建方式 PC开发环境操作系统 PC开发环境操作系统版本号 HBuilderX类型 HBuilderX版本号 手机系统 手机系统版本号 手机厂商 手机机型 页面类型 vue版本 打包方式
HBuilderX Windows win10 正式 4.36 iOS iOS 17 苹果 13 vue vue2 云端

2 回复

先用 uts 插件自己做一个插件吧


在uni-app中使用uni.compressVideo进行视频压缩时,确实可能会遇到视频方向(orientation)在压缩后变为“up”(即竖直向上)的问题。这通常是因为在压缩过程中没有正确保留或处理原视频的旋转信息。以下是一个可能的解决方案,通过手动获取视频的方向信息,并在需要时调整视频播放方向。

首先,获取视频的方向信息通常需要在视频文件被上传或处理前进行。由于uni.compressVideo本身不提供保留方向信息的选项,我们需要在压缩前获取视频的方向,并在播放压缩后的视频时根据这个方向进行旋转。

这里是一个基本的思路和代码示例,用于获取视频的方向(假设你已经有一个视频文件路径):

// 获取视频方向信息的函数
function getVideoOrientation(videoPath) {
  return new Promise((resolve, reject) => {
    uni.createVideoContext(videoPath, {
      success: (res) => {
        const videoContext = res.context;
        videoContext.seek(1); // 移动到视频的1秒位置,以确保元数据已加载
        videoContext.videoMetadata = null; // 初始化元数据
        videoContext.onLoadedMetadata(() => {
          const orientation = videoContext.videoMetadata.orientation; // 获取方向
          resolve(orientation);
        });
        videoContext.onError((err) => {
          reject(err);
        });
      },
      fail: (err) => {
        reject(err);
      }
    });
  });
}

// 使用示例
getVideoOrientation('path/to/your/video.mp4').then((orientation) => {
  console.log('Original orientation:', orientation);

  // 执行视频压缩
  uni.compressVideo({
    src: 'path/to/your/video.mp4',
    success: (res) => {
      console.log('Compressed video path:', res.tempFilePath);
      // 在这里保存压缩后的视频路径,并考虑在播放时根据orientation调整方向
    },
    fail: (err) => {
      console.error('Compress failed:', err);
    }
  });
}).catch((err) => {
  console.error('Failed to get video orientation:', err);
});

请注意,上述代码中的uni.createVideoContext方法实际上并不直接支持通过文件路径创建上下文(它通常用于页面上已存在的<video>元素)。因此,你可能需要先将视频文件上传到服务器或使用其他方式(如使用<input type="file">在前端选择视频,并通过FileReader读取文件元数据)来获取视频的方向信息。

一旦你有了方向信息,你可以在播放压缩后的视频时,通过CSS或Canvas来旋转视频,以确保它显示正确的方向。

回到顶部