uni-app video全屏必须用videoContext.requestFullScreen()触发,不能靠HTML属性;App端需用户手势调用且支持direction参数,H5需manifest.json设"orientation":"all",cover-view全屏时失效是设计使然,覆盖须用subNVue。
uni-app
的
组件全屏切换不能靠加
属性或写
这类 HTML 属性实现——这些在 App/H5/小程序里基本无效,真机上会静默忽略。
App 端必须用
触发
原生播放器(iOS AVPlayerLayer / Android SurfaceView)不响应 Vue 模板里的布尔属性,只认 JS API 调用,且必须由用户手势(如
)触发,否则 iOS 直接拒绝、Android 可能报错
。
支持传参:
强制横屏,
自动适配(但 iOS 下常失效,建议显式指定)
调用前务必确保
的
与
严格一致,大小写敏感
不要在
或
里直接调,等用户点击按钮再执行;若需自动全屏(如加载完),得绑定
或
,并在回调里用
包一层
H5 端要改
才能横屏全屏
H5 的全屏横屏失败,90% 是因为没开方向权限。浏览器原生
在锁定竖屏的页面里无法触发横屏渲染。
uni-app电商系统实战精讲课程课件
uni-app电商系统实战精讲课程
下载
必须在
的
节点下加:
(不是
,后者无效)
如果用了
嵌视频(比如 YouTube),则需额外加
属性,否则横屏被拦截
CSS 上别依赖
模拟横屏——它只是视觉旋转,实际 viewport 尺寸没变,
定位会错乱
全屏退出后方向不恢复?得手动锁屏
原生全屏退出后,App 端不会自动切回竖屏,页面可能卡在横屏状态,尤其 iOS 上明显。
监听
,当
时,立即调
Android 部分机型还需配合
,否则状态残留
别在
里处理——全屏播放器是独立于 Vue 生命周期的 native view,页面卸载时它可能还在跑
全屏时消失是设计如此,不是 bug
一旦
进入原生全屏,它就脱离 WebView 渲染树,
失去宿主上下文,自然不显示——这不是兼容性问题,是架构决定的。
别写
切换
显示,它根本不会挂载
要覆盖全屏视频,唯一可靠方案是
:在
中配置
+
,并确保其
里设
、
等固定定位
的定位是相对于整个窗口(Window),不是父页面,滚动时不会跟着动——这点容易被忽略,导致“按钮钉死在屏幕右上角”而非随视频内容滚动
videofullscreenwebkit-playsinlinevideoContext.requestFullScreen()@clickNotAllowedErrorrequestFullScreen(){ direction: 90 }{ direction: 0 }uni.createVideoContext('id', this)idonLoadmounted@play@canplaythis.$nextTickmanifest.jsonrequestFullscreen()manifest.jsonh5"orientation": "all""landscape"iframeallow="fullscreen; accelerometer; gyroscope; magnetometer"transform: rotate(90deg)cover-view@fullscreenchangee.detail.fullScreen === falseuni.setScreenOrientation({ orientation: 'portrait' })plus.navigator.setFullscreen(false)onUnloadcover-viewvideocover-viewv-if="!isFullscreen"cover-viewsubNVuepages.jsonposition: "dock"zIndex: 9999styletop: 0right: 0subNVue