uniapp video組件全屏導(dǎo)致頁面橫豎錯亂問題

背景介紹

使用 video組件做一個視頻播放功能，不全屏的情況正常。在蘋果手機上全屏后，點擊左上角退出全屏，頁面出現(xiàn)問題如下圖問題，主要系統(tǒng)iOS16 以上的都有問題。

非全屏(豎屏)	全屏(橫屏)

硬件環(huán)境

解決過程

官網(wǎng)文檔

? App平臺：3.6.14 以及 手機系統(tǒng) iOS16 以上video全屏 需要配置應(yīng)用支持橫屏： 在 manifest.json 文件內(nèi) app-plus 節(jié)點下新增 screenOrientation 配置，設(shè)置值為["portrait-primary","portrait-secondary","landscape-primary","landscape-secondary"]。原文鏈接

manifest.json

按照文檔說明配置重新打包后，雖然全屏屏幕內(nèi)容和視頻一起橫屏了，但是退出全屏?xí)r一直橫屏，無法自動豎屏。

"app-plus" : {
    ...略
    "screenOrientation" : [
        //可選，字符串?dāng)?shù)組類型，應(yīng)用支持的橫豎屏
        "portrait-primary", //可選，字符串類型，支持豎屏
        "portrait-secondary", //可選，字符串類型，支持反向豎屏
        "landscape-primary", //可選，字符串類型，支持橫屏
        "landscape-secondary" //可選，字符串類型，支持反向橫屏
    ],
...
}

非全屏(豎屏)	全屏(橫屏)

視頻播放組件

video 組件有個fullscreenchange 事件，通過監(jiān)聽該事件，當(dāng)退出全屏?xí)r手動設(shè)置豎屏，這樣就可以完美解決了。

解決代碼

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