uni-app video组件direction属性默认不起作用 全屏播放永远都是横屏

uni-app video组件direction属性默认不起作用 全屏播放永远都是横屏

测试过的手机：

iphone7，8，10都是最新系统，安卓华为，小米，vivo最新系统

示例代码：

<video src="https://jvod.3721.com/vod/product/137be37a-e618-4666-b1e6-c30202c36554/986e8fbd937342c09b699a2a8a86b6ff.mp4?source=2&h265=h265/18799/4ac560eac78d421f991d09f670be1f50.mp4"></video>

操作步骤：

直接咱贴代码即可，关键代码就一行

预期结果：

全屏播放不会竖屏，即使视频是竖屏格式

实际结果：

全屏播放不会竖屏，即使视频是竖屏格式

bug描述：

video组件direction不设置，全屏默认横屏播放，并不会像文档所说的【不指定则根据宽高比自动判断】

信息类别 信息内容
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win10
HBuilderX类型 正式
HBuilderX版本号 3.2.0
手机系统 全部
页面类型 vue
打包方式 云端
项目创建方式 HBuilderX

Image 1 Image 2

video-test.rar


更多关于uni-app video组件direction属性默认不起作用 全屏播放永远都是横屏的实战教程也可以访问 https://www.itying.com/category-93-b0.html

31 回复

2025年了，这个问题还在

更多关于uni-app video组件direction属性默认不起作用 全屏播放永远都是横屏的实战教程也可以访问 https://www.itying.com/category-93-b0.html


感谢您的反馈，已加分！

一年了，你们都不解决，，，是技术瓶颈吗

回复 l***@163.com: this.$refs.videoF.requestFullScreen({direction: 0});

修不好的吗？video组件direction不设置，全屏默认横屏播放，并不会像文档所说的【不指定则根据宽高比自动判断】

回复 百倍: video组件direction不设置，全屏根据宽高比自动判断，用上面示例测试看看

this.$refs.videoF.requestFullScreen({direction: 0});

我这边用ref调提示找不到这个方法【TypeError: this.$refs.myVideo.requestFullScreen is not a function】

回复 渊默:

playClick() { let _this = this if (this.$refs.videoF) {

}

好用！

ios和Android表现是否一致？ 测试暂时复现问题，请提供一个可复现的示例（上传附件），方便我们排查问题

附件我已经上传了，其实很简单，就创建一个uniapp基础项目，弄一个video标签，放一个竖屏视频连接，再打包到手机上全屏播放就能看到全部是横屏播放的效果了 【】 这是关键代码，上边也有附件是整个demo

安卓和ios都是默认横屏播放，测试了很多手机了

回复 l***@163.com: IOS13.6.1，iPhone 6s Plus测试复现问题。Android 10，小米8测试正常。请提供下复现此问题的具体设备信息，方便我们排查问题。

回复 DCloud_UNI_Anne: 这个判断方向有没有暴露判断接口,api设置全屏如何拿到视频宽高比?

回复 DCloud_UNI_Anne: 测试用的苹果手机是iphone 7 版本 14.7.1，安卓手机是vivo 系统7.1.2，还有一个手机也是vivo，设备具体信息暂无法查看了，还有客户用的华为手机也有这个问题，你们可以多找几台手机试试，很多手机都能复现这个问题

现在好使了么 我也发现这个问题了

没有

什么时候解决啊

此问题已修复了，用上方示例测试正常，你试下，如果还有问题提供下你的最小化复现示例（上传附件）

现在还有这个问题……

就这思路，我是已经实现了的

没有requestFullScreen这个方法

我这横屏出现了问题，竖屏没问题

我也遇到这个问题了，请问您解决没？怎么解决的？

全屏时，强制竖屏，会旋转一下 // //竖屏锁定 // // #ifdef APP-PLUS // plus.screen.lockOrientation(“portrait-primary”) // // #endif

问题还没修好啊

还没修好，一个问题拖了几年

在 uni-app 中，video 组件的 direction 属性确实存在默认行为与文档描述不符的情况。根据你的测试，当不设置 direction 时，全屏播放始终为横屏，而不是根据视频宽高比自动判断。

问题分析：

  1. 平台差异：direction 属性在不同平台（iOS、Android）的实现可能存在差异。iOS 通常对全屏方向控制更严格，而 Android 各厂商系统也有自定义行为。
  2. 全屏模式限制：全屏播放时，系统可能强制使用横屏（尤其是 iOS），覆盖了 direction 的默认逻辑。
  3. 视频源影响：某些视频编码或元数据可能影响方向判断。

解决方案：

  1. 显式设置 direction：如果视频是竖屏，直接设置 direction="90"（竖屏）或 direction="-90"（反向竖屏）。例如：
    <video 
   src="your-video.mp4" 
   direction="90"
></video>
  2. 动态判断方向：通过 uni.getVideoInfo() 获取视频宽高比，动态设置 direction：
    // 获取视频信息后判断
if (videoInfo.height > videoInfo.width) {
   this.direction = 90; // 竖屏
}
回到顶部