uni-app Video组件最大化旋转异常严重BUG

uni-app Video组件最大化旋转异常严重BUG

示例代码：

<template>  
    <view>  
        <button style="margin-top: 40px;" @tap="chooseVideo">选择</button>  
        <video  
            v-if="src"  
            id="my-video"  
            :src="src"  
        ></video>  
    </view>  
</template>  

<script>  
export default {  
    data() {  
        return {  
            src: ''  
        }  
    },  
    methods: {  
        chooseVideo() {  
            uni.chooseVideo({  
                success: (res) => {  
                    console.log(res);  
                    this.src = res.tempFilePath  
                }  
            })  
        },  
    }  
}  
</script>  

<style>  
</style>

操作步骤：

  • 选择视屏后点击播放，然后点击全屏

预期结果：

  • 视频旋转90度后铺满屏幕正常播放。

实际结果：

  • 视频旋转了180度，UI旋转了90度，整个应用变成了横屏。

bug描述：

  • Video最大化旋转异常。
信息项 详细信息
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 Win10
HBuilderX类型 正式
HBuilderX版本号 3.99
手机系统 iOS
手机系统版本号 iOS 16
手机厂商 苹果
手机机型 IPhone11
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

Image Image Image


更多关于uni-app Video组件最大化旋转异常严重BUG的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

Android也有同样的问题。

更多关于uni-app Video组件最大化旋转异常严重BUG的实战教程也可以访问 https://www.itying.com/category-93-b0.html


iOS16 以上video全屏 需要配置应用支持横屏： 在 manifest.json 文件内 app-plus 节点下新增 screenOrientation 配置，设置值为[“portrait-primary”,“portrait-secondary”,“landscape-primary”,“landscape-secondary”]。 另外，示例代码并未复现bug

在 uni-app 中使用 Video 组件时，可能会遇到最大化（全屏）时旋转异常的问题。这个问题通常是由于 Video 组件的全屏模式与设备的屏幕方向处理不一致导致的。以下是一些可能的解决方案和排查步骤：

1. 检查 Video 组件的配置

确保 Video 组件的配置正确，特别是 fullscreen 和 direction 属性。

<video
  src="your-video-url"
  controls
  :fullscreen="true"
  :direction="0" <!-- 0: 正常方向, 90: 旋转90度, -90: 旋转-90度 -->
></video>

2. 监听全屏事件

在全屏事件中手动处理屏幕方向。你可以使用 uni.onWindowResize 或 uni.onDeviceOrientationChange 来监听屏幕方向的变化，并相应地调整视频的方向。

uni.onWindowResize((res) => {
  if (res.size.windowWidth > res.size.windowHeight) {
    // 横屏
    this.videoDirection = 90;
  } else {
    // 竖屏
    this.videoDirection = 0;
  }
});

3. 使用 plus API 控制屏幕方向

如果你需要更精细的控制，可以使用 plus API 来锁定屏幕方向。

plus.screen.lockOrientation('landscape-primary'); // 锁定为横屏
plus.screen.lockOrientation('portrait-primary'); // 锁定为竖屏

4. 使用 CSS 强制旋转

如果以上方法无效，可以尝试使用 CSS 强制旋转视频元素。

video {
  transform: rotate(90deg);
  transform-origin: center center;
}

5. 检查 uni-app 版本

确保你使用的是最新版本的 uni-app，因为旧版本可能存在已知的 Video 组件问题。你可以通过以下命令更新 uni-app：

npm update @dcloudio/uni-app

6. 使用原生插件

如果问题依然存在，可以考虑使用原生插件来替代 uni-app 的 Video 组件。例如，使用 cordova-plugin-video-player 或 react-native-video 等插件。

7. 提交 Issue

如果以上方法都无法解决问题，建议在 uni-app 的官方 GitHub 仓库中提交 Issue，详细描述你的问题和复现步骤，以便开发团队能够更好地定位和修复问题。

示例代码

以下是一个完整的示例代码，展示了如何监听屏幕方向并调整视频方向：

<template>
  <view>
    <video
      :src="videoUrl"
      :controls="true"
      :fullscreen="isFullscreen"
      :direction="videoDirection"
      @fullscreenchange="onFullscreenChange"
    ></video>
  </view>
</template>

<script>
export default {
  data() {
    return {
      videoUrl: 'your-video-url',
      isFullscreen: false,
      videoDirection: 0,
    };
  },
  methods: {
    onFullscreenChange(e) {
      this.isFullscreen = e.detail.fullscreen;
      if (this.isFullscreen) {
        uni.onWindowResize((res) => {
          if (res.size.windowWidth > res.size.windowHeight) {
            this.videoDirection = 90;
          } else {
            this.videoDirection = 0;
          }
        });
      }
    },
  },
};
</script>

<style>
video {
  width: 100%;
  height: 300px;
}
</style>
回到顶部