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');
		}
	},
  }
}