uni-app video组件不响应屏幕旋转的解决方法是:关闭enable-danmu和controls以解除原生播放器方向锁定;在onReady中调用uni.setScreenOrientation;全屏时监听fullscreen-change事件并重置方向;页面离开前切回竖屏。

uni-app 中 video 组件不响应屏幕旋转?先关掉 enable-danmu 和 controls 的默认干扰
uni-app 的 <video> 组件在 iOS 上默认会锁定竖屏,哪怕你已经调用 uni.setScreenOrientation,它也大概率没反应——根本原因不是 API 没生效,而是 video 组件内部的原生播放器(尤其是 iOS WKWebView)接管了方向控制权。关闭 controls(系统控件)和 enable-danmu(弹幕)能减少原生层对 orientation 的强干预,这是多数人卡住的第一步。
-
controls设为false后,需自行实现播放/暂停按钮,但换来的是 orientation 控制权回归 JS 层 -
enable-danmu在 iOS 下会触发全屏专用渲染路径,一开就绕过你的横竖屏设置 - Android 相对宽松,但统一关掉更稳妥,避免平台差异引发的偶发失效
uni.setScreenOrientation 不生效?检查调用时机和页面生命周期
这个 API 必须在页面真正「准备好」之后调用,比如在 onReady 钩子中执行;如果放在 onLoad 或 mounted(Vue 3 setup),很可能因 native view 尚未创建而静默失败。iOS 尤其敏感,早一秒都白调。
- 只在需要时调用:比如用户点击“横屏播放”按钮后,再执行
uni.setScreenOrientation({orientation: 'landscape'}) - 别在
onLoad里硬塞,此时 DOM 和 native view 都未就绪,返回fail但不报错 - 调用前加个
setTimeout延迟 100ms 是常见兜底手段,但不如直接挪到onReady - 退出横屏时记得调用
uni.setScreenOrientation({orientation: 'portrait'}),否则下次进页面仍保持横屏
video 全屏后自动旋转失效?用 fullscreen-change 事件手动补救
用户点击右上角全屏按钮(或调用 videoContext.requestFullScreen())后,iOS 会再次接管 orientation,导致之前设的 landscape 被覆盖。这时候不能等,得监听 fullscreen-change 事件,在进入全屏瞬间重置方向。
- 在
<video>上绑定@fullscreen-change="onFullscreenChange" - 在
onFullscreenChange里判断detail.fullscreen是否为true,是则立刻再调一次uni.setScreenOrientation - 注意:该事件在 Android 上可能不触发,所以不要依赖它做唯一控制逻辑
- 若用
videoContext.requestFullScreen(),建议在 Promise resolve 后再调setScreenOrientation,比事件更可靠
真机调试时横竖屏切换卡顿或回弹?避开 pageOrientation 配置项的坑
很多人在 pages.json 里给页面配了 "pageOrientation": "landscape",以为能一劳永逸。结果发现:首次进页面是横屏,但切后台再切回来就变竖屏,或者返回上一页再进来就失效。这是因为该配置只影响页面初始化,且 H5 端完全不支持,App 端也仅在页面栈顶层生效。
- 删掉
pages.json中的pageOrientation,改用运行时 API 控制,才可控 - 多个页面共存时(比如视频页嵌在 tabbar 页面里),
pageOrientation会与 tabbar 的竖屏限制冲突,直接导致白屏或崩溃 - App 平台下,
setScreenOrientation对非当前活跃页面无效,所以必须确保只对正在播放视频的页面操作
横竖屏控制本质是 native 层的窗口级操作,JS 层只是发指令。任何一步没卡准时机、没绕开原生播放器的限制,都会表现为“点了没反应”或“闪一下又弹回去”。最稳的做法是:关 controls → onReady 调 orientation → 全屏时监听并重置 → 页面离开前强制切回 portrait。其他花哨方案,基本都在这四步之外多此一举。

















