uni-app getVideoInfo宽高与实际不符

uni-app getVideoInfo宽高与实际不符

开发环境 版本号 项目创建方式
Windows 10 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

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

HBuilderX类型：正式

HBuilderX版本号：3.3.0

手机系统：Android

手机系统版本号：Android 10

手机厂商：红米

手机机型：红米K40

页面类型：vue

vue版本：vue2

打包方式：云端

项目创建方式：HBuilderX

### 示例代码：

```javascript
uploadVideo() {    
  uni.chooseVideo({    
    sourceType: ['album', 'camera'],    
    maxDuration: 60,    
    compressed: false,    
    success: (res: any) => {    
      uni.saveFile({    
        tempFilePath: res.tempFilePath,    
        success: res => {    
          const tempPath = res.savedFilePath    
          ;(uni as any).getVideoInfo({    
            src: tempPath,    
            success: (res: any) => {    
              console.log(res.width)    
              console.log(res.height)    
            }    
          })    
        }    
      })    
    }    
  })    
}

操作步骤：

  1. 横屏录制
  2. 竖屏录制

预期结果：

  1. 横屏返回正确宽高
  2. 竖屏返回正确宽高

实际结果：

  1. 横屏宽高返回正确
  2. 竖屏宽高返回相反值

bug描述：

getVideoInfo接口返回的宽高与视频实际宽高不符合
相关详情


更多关于uni-app getVideoInfo宽高与实际不符的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

旋转手机的时候 屏幕旋转了吗？

更多关于uni-app getVideoInfo宽高与实际不符的实战教程也可以访问 https://www.itying.com/category-93-b0.html


没

回复 7***@qq.com: 旋转了，宽高才会变

回复 FullStack: 旋转添加了 视频一样不对

我回复在 你链接的那个帖子里了。 你需要提供一下可以复现问题的代码和视频。我这里看看

已贴代码 https://ask.dcloud.net.cn/question/130928?notification_id-1005358rf-falseitem_id-181834#!answer_181834

没人解决吗

getVideoInfo: function() {
uni.chooseVideo({

                sourceType: ['album'],  
                maxDuration: 60,  
                compressed: false,  
                success: function (res) {  
                    console.log("res.tempFilePath  ===  " + res.tempFilePath);  
                    var getOption = {  
                        src:res.tempFilePath,  
                        success:function(res3){  
                            console.log("complete  === " + JSON.stringify(res3))  
                        }  
                    }  
                    console.log("getOption  ===  " + JSON.stringify(getOption));  
                    uni.getVideoInfo(getOption);  

                }  

            })  
        },

我用上面的代码，获取我手机上的多个视频。获取到的信息是正常的。 需要你提供一下更详细的信息或者具体的视频才能定位

这是一个已知的uni-app API兼容性问题。uni.getVideoInfo()在某些Android设备上获取竖屏视频的宽高时会出现颠倒，主要是因为底层获取视频元数据时未能正确处理视频旋转信息（Rotation Metadata）。

问题原因：
视频文件通常包含旋转元数据（如90°、270°旋转标记），而部分Android系统的原生API在解析视频尺寸时未自动校正旋转状态，导致返回的宽高值与实际显示方向不符。

临时解决方案：
在获取视频信息后，手动检测并校正宽高值。可以通过以下方式判断是否需要交换宽高：

  1. 使用uni.getVideoInfo()的orientation字段（如果可用）判断视频方向。
  2. 若orientation不可用，可通过res.rotation（部分平台支持）检测旋转角度，若旋转角度为90°或270°，则交换宽高值。
  3. 更通用的方案：使用<video>组件加载视频后，通过videoContext获取实际宽高（但此方法涉及界面渲染，适合预览场景）。

代码调整示例：

uni.getVideoInfo({
  src: tempPath,
  success: (res) => {
    let width = res.width;
    let height = res.height;
    // 根据旋转角度校正宽高
    if (res.rotation === 90 || res.rotation === 270) {
      [width, height] = [height, width]; // 交换宽高
    }
    console.log('校正后:', width, height);
  }
});
回到顶部