uni-app 手机端选择本地视频播放时 uni.getVideoInfo orientation 方向错误 导致视频暂停播放时 视频画面方向旋转

uni-app 手机端选择本地视频播放时 uni.getVideoInfo orientation 方向错误 导致视频暂停播放时 视频画面方向旋转

示例代码：

// 选择视频  
openCamera() {  
      uni.chooseVideo({  
        count: 1,  
        success: (res) => {  
          if (res.duration > VIDEO_DURATION_MAX) {  
            return this.tui.toast(`视频长度超过${VIDEO_DURATION_MAX}s，请选择较短时长视频`, 3000, false)  
          }  
          if (res.duration < VIDEO_DURATION_MIN) {  
            return this.tui.toast(`视频长度小于${VIDEO_DURATION_MIN}s，请选择较长时长视频`, 3000, false)  
          }  
          this.tui.href('/pages/mine/pub-small-video/pub-small-video?src=' + res.tempFilePath)  
        },  
        fail(err) {  
          console.log(err)  
        },  
      })  
    }  
// 获取视频信息  
getVideoInfo(src) {  
      uni.getVideoInfo({  
        src,  
        success: (res) => {  
          console.log(res.orientation, res.type, res.width, res.height)  
          this.src = src  
        },  
      })  
    }

操作步骤：

  1. 选择一个竖屏录制的视频
  2. 使用video标签播放
  3. 暂停播放

预期结果：

  • video显示竖屏画面

实际结果：

  • video显示横屏画面

bug描述：

如题


更多关于uni-app 手机端选择本地视频播放时 uni.getVideoInfo orientation 方向错误 导致视频暂停播放时 视频画面方向旋转的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

为啥看不到附件照片？ 上传下问题照片


更多关于uni-app 手机端选择本地视频播放时 uni.getVideoInfo orientation 方向错误 导致视频暂停播放时 视频画面方向旋转的实战教程也可以访问 https://www.itying.com/category-93-b0.html


bug 已修复。 使用HX 3.1.22 alpha之后版本验证

这个问题没有修复，不管你是竖屏还是横屏的视频，读取的结果都是heigth比width大

这个问题没有修复，不管你是竖屏还是横屏的视频，读取的结果都是heigth比width大的

这是一个已知的uni-app平台差异问题。uni.getVideoInfo 在某些Android设备上获取的视频方向信息（orientation）可能不准确，导致视频播放时画面旋转。

原因分析：

  1. 元数据解析差异：不同设备录制的视频在元数据中存储方向信息的方式不同（如iOS使用rotation矩阵，Android使用Exif标签）
  2. 平台实现不一致：uni.getVideoInfo 底层依赖各平台原生能力，Android端对某些视频格式的方向解析可能存在偏差
  3. 视频标签渲染问题：即使获取到正确的方向信息，<video> 组件也可能未正确应用旋转

临时解决方案：

  1. 使用CSS强制旋转（推荐）：
/* 根据orientation值动态添加类名 */
.video-portrait {
  transform: rotate(90deg);
  transform-origin: center;
}
  1. 使用第三方库解析：
// 使用exif-js等库手动解析视频方向
import EXIF from 'exif-js'

// 从视频文件读取Exif数据
const getVideoOrientation = (file) => {
  return new Promise((resolve) => {
    EXIF.getData(file, function() {
      const orientation = EXIF.getTag(this, 'Orientation')
      resolve(orientation || 1)
    })
  })
}
回到顶部