ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

uni-app解决video组件全屏时页面横竖错乱问题

2026/9/16 18:54:25 拓冰建站 浏览量
uni-app解决video组件全屏时页面横竖错乱问题

使用 video组件播放视频时,在苹果手机上全屏后页面横竖屏错乱,点击返回按钮退出全屏,页面变成横屏,在iOS16 以上都会出现这个问题。

解决方案

修改manifest.json配置文件

"app-plus" : {...略"screenOrientation" : [//可选,字符串数组类型,应用支持的横竖屏"portrait-primary", //可选,字符串类型,支持竖屏"portrait-secondary", //可选,字符串类型,支持反向竖屏"landscape-primary", //可选,字符串类型,支持横屏"landscape-secondary" //可选,字符串类型,支持反向横屏],
...
}

video 组件添加fullscreenchange监听事件,当退出全屏时手动设置竖屏。

<video class="detail_video" id="myVideo" :src="detail.video_url" @fullscreenchange="fullscreenchange" controls></video>
export default {data() {return {}},methods: {fullscreenchange(e){if(!e.detail.fullScreen){ // 退出全屏,锁定竖屏plus.screen.lockOrientation('portrait-primary');}},}
}