uniapp video组件全屏导致页面横竖错乱问题

uniapp video组件全屏导致页面横竖错乱问题

背景介绍

使用 video组件做一个视频播放功能,不全屏的情况正常。在苹果手机上全屏后,点击左上角退出全屏,页面出现问题如下图问题,主要系统iOS16 以上的都有问题。

非全屏(竖屏) 全屏(横屏)
portrait-primary landscape-primary

硬件环境

品牌 系列 版本 存在
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" //可选,字符串类型,支持反向横屏
],
...
}
非全屏(竖屏) 全屏(横屏)
portrait-primary landscape-primary

视频播放组件

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');
}
},
}
}
posted @   天葬  阅读(1998)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示