uniapp video组件全屏导致页面横竖错乱问题
uniapp video组件全屏导致页面横竖错乱问题
背景介绍
使用 video
组件做一个视频播放功能,不全屏的情况正常。在苹果手机上全屏后,点击左上角退出全屏,页面出现问题如下图问题,主要系统iOS16 以上的都有问题。
非全屏(竖屏) | 全屏(横屏) |
---|---|
![]() |
![]() |
硬件环境
品牌 | 系列 | 版本 | 存在 |
---|---|---|---|
IPhone | 14 | 16.5.1 | 是 |
IPhone | 8 | 15.0.2 | 否 |
IPad | 6代 | 16.6 | 是 |
解决过程
官网文档
App平台:3.6.14 以及 手机系统 iOS16 以上video全屏 需要配置应用支持横屏: 在 manifest.json 文件内 app-plus 节点下新增 screenOrientation 配置,设置值为["portrait-primary","portrait-secondary","landscape-primary","landscape-secondary"]。原文链接
manifest.json
按照文档说明配置重新打包后,虽然全屏屏幕内容和视频一起横屏了,但是退出全屏时一直横屏,无法自动竖屏。
"app-plus" : { ...略 "screenOrientation" : [ //可选,字符串数组类型,应用支持的横竖屏 "portrait-primary", //可选,字符串类型,支持竖屏 "portrait-secondary", //可选,字符串类型,支持反向竖屏 "landscape-primary", //可选,字符串类型,支持横屏 "landscape-secondary" //可选,字符串类型,支持反向横屏 ], ... }
非全屏(竖屏) | 全屏(横屏) |
---|---|
![]() |
![]() |
视频播放组件
video 组件有个fullscreenchange
事件,通过监听该事件,当退出全屏时手动设置竖屏,这样就可以完美解决了。
属性名 | 类型 | 说明 |
---|---|---|
@fullscreenchange | EventHandle | 当视频进入和退出全屏时触发,event.detail = {fullScreen, direction},direction取为 vertical 或 horizontal |
解决代码
vue
<video v-if="isplay" :style="{'height':height,'width':'100%','borderRadius':`${borderRadius}rpx`}" :src="src" controls objectFit="contain" :enable-progress-gesture="enableProgressGesture" :initial-time="initialTime" x5-video-player-type="h5" x-webkit-airplay="allow" webkit-playsinline="true" @error="videoErrorCallback" @timeupdate="timeupdate" @fullscreenchange="fullscreenchange" @play="play" @pause="pause" >
javascript
export default { data() { return { isplay: false, // isTip: true// } }, methods: { timeupdate(e) { this.$emit('timeupdate', e) }, fullscreenchange(e){ if(!e.detail.fullScreen){ // 退出全屏,锁定竖屏 plus.screen.lockOrientation('portrait-primary'); } }, } }
哇!又赚了一天人民币
标签:
uniapp
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库