前端开发 uni-app怎么实现视频播放自动旋转 uni-app横竖屏切换控制技巧详解|Duuu笔记
uni-app video组件不响应屏幕旋转的解决方法是：关闭enable-danmu和controls以解除原生播放器方向锁定；在onReady中调用uni.setScreenOrientation；全屏时监听fullscreen-change事件并重置方向；页面离开前切回竖屏。
uni-app 中 video 组件不响应屏幕旋转？先关掉
enable-danmu
和
controls
的默认干扰
uni-app 的
组件在 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
事件，在进入全屏瞬间重置方向。
Action Figure AI
借助Action Figure AI的先进技术，瞬间将照片转化为定制动作人偶。
下载
在
上绑定
@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。其他花哨方案，基本都在这四步之外多此一举。
