跳转到主内容
极星编程网:以代码为星,赴技术山海!

uni-app如何实现视频全屏切换 uni-app控制视频横竖屏播放

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
与
严格一致,大小写敏感 不要在
onLoad
或
mounted
里直接调,等用户点击按钮再执行;若需自动全屏(如加载完),得绑定
@play
或
@canplay
,并在回调里用
this.$nextTick
包一层 H5 端要改
manifest.json
才能横屏全屏 H5 的全屏横屏失败,90% 是因为没开方向权限。浏览器原生
requestFullscreen()
在锁定竖屏的页面里无法触发横屏渲染。 uni-app电商系统实战精讲课程课件 uni-app电商系统实战精讲课程 下载 必须在
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),不是父页面,滚动时不会跟着动——这点容易被忽略,导致“按钮钉死在屏幕右上角”而非随视频内容滚动

相关文章