uni-app iso视频设置direction 90或者-90 样式会错乱

示例代码：

VideoContext.value.requestFullScreen({ direction: 90 })

操作步骤：

点击按钮后全屏播放

预期结果：

视频横屏显示

实际结果：

视频横屏了但是方向向上 无法横行显示

bug描述：

点击按钮播放时设置direction可以正常显示视频 都是设置90和-90时 视频出现附件所示情况。真机运行没问题，云打包后安装的app出现这个问题，自定义基座也会出现这个问题，安卓测试没问题

项目	信息
产品分类	uniapp/App
PC开发环境操作系统	Mac
PC开发环境操作系统版本号	14.0
HBuilderX类型	正式
HBuilderX版本号	4.03
手机系统	iOS
手机系统版本号	iOS 17
手机厂商	苹果
手机机型	苹果11
页面类型	nvue
vue版本	vue3
打包方式	云端
项目创建方式	HBuilderX

bupafengyu 1楼•10 天前

我也遇到

ionicwang 2楼•10 天前

什么浏览器

nodeper 3楼•10 天前

app 苹果手机会这样

sinazl 4楼•10 天前

在 uni-app 中，如果你在 iOS 设备上设置视频的 direction 为 90 或 -90（即旋转视频），可能会遇到样式错乱的问题。这是因为 iOS 系统的视频播放器在处理视频旋转时，可能会出现布局或样式上的异常。

解决方案

使用 CSS 旋转视频容器
你可以尝试通过 CSS 来旋转视频的容器，而不是直接设置视频的 direction。这样可以避免 iOS 视频播放器本身的布局问题。

<template>
  <view class="video-container">
    <video :src="videoSrc" controls></video>
  </view>
</template>

<style>
.video-container {
  transform: rotate(90deg); /* 或者 -90deg */
  transform-origin: center;
}
</style>

使用 uni.createVideoContext 控制视频
如果你需要动态控制视频的旋转，可以使用 uni.createVideoContext 来操作视频元素。

export default {
  data() {
    return {
      videoSrc: 'your-video-url.mp4'
    };
  },
  methods: {
    rotateVideo(degrees) {
      const videoContext = uni.createVideoContext('myVideo');
      videoContext.setDirection(degrees);
    }
  }
};

<template>
  <view>
    <video id="myVideo" :src="videoSrc" controls></video>
    <button @click="rotateVideo(90)">Rotate 90°</button>
    <button @click="rotateVideo(-90)">Rotate -90°</button>
  </view>
</template>

检查视频的宽高比
旋转视频后，视频的宽高比可能会发生变化，导致布局错乱。确保你的视频容器有正确的宽高比，并且能够适应旋转后的视频。

.video-container {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  position: relative;
}

video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

使用 video 组件的 style 属性
你也可以直接通过 style 属性来设置视频的旋转和宽高比。

<template>
  <view>
    <video :src="videoSrc" controls style="transform: rotate(90deg);"></video>
  </view>
</template>