uni-app video全屏必须用videocontext.requestfullscreen()触发,不能靠html属性;app端需用户手势调用且支持direction参数,h5需manifest.json设"orientation":"all",cover-view全屏时失效是设计使然,覆盖须用subnvue。

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











