uniapp視頻組件坑記錄

對于前端開發,要是需求上有在視頻組件上添加UI設計,比如彈窗,或者滾動等等。那么視頻的層級關系就成了最頭疼的問題,對于這方面的解決,我大多都是重構了層級被遮擋的組件,但總有例外,有些真的無力重構。

層級暫且不看,我這邊出現了視頻全屏退出后,頁面樣式錯亂的問題。

過程是這樣的:

我所開發的app做了豎屏鎖定:

plus.screen.lockOrientation('portrait-primary')

進入有視頻組件的頁面,我對視頻全屏也做了橫豎屏展示,就是說,如果觀看的視頻是豎屏的,那就豎屏全屏,橫屏的話,就橫屏全屏。

//橫屏plus.screen.lockOrientation('landscape')//豎屏plus.screen.lockOrientation('portrait')

開發完畢后,開開心心測試后,覺得沒問題,想不到的是,測試大佬給我發了一張頁面錯亂的截圖,我整個人都不好了

如何復現呢:我先找到豎屏的視頻,全屏后退出,然后再去找橫屏的視頻,這時候,要將設備橫屏一下,然后點擊全屏,問題就出現了。。。問題導致的原因我是找到了,但如何解決就很扯淡了 ,由于這坑我無法埋,所以就針對復現做了處理,只要符合復現過程的中,我就判斷下,讓他立馬退出全屏,可不要小看這立馬退出全屏,它是能讓頁面恢復正常,下次點全屏就會變正常的了,emmm~~,雖然體驗不太好,但問題不見了不是好事么。。其中bug產生的原理,鄙人還是不太了解,希望uniapp官方能更好優化video組件嘍

橫豎屏邏輯我放到了視頻全屏監聽事件@fullscreenchange(僅供參考)

fullScreenChange(e) {　　　 //this.videoDirect:設置全屏時視頻的方向,不指定則根據寬高比自動判斷。有效值為 0(正常豎向), 90(屏幕逆時針90度), -90(屏幕順時針90度)      //投屏橫屏      if(e.detail.fullScreen){　　　　　//豎屏不做橫屏處理        if(this.videoDirect!=0){          plus.screen.lockOrientation('landscape-primary')        }        //為解決頁面錯亂,無奈加上的解決方案        var s = uni.getsysteminfoSync();            if(s.screenWidth<s.screenHeight&&this.videoDirect!=0){          var video = uni.createVideoContext('preview-video', this);          video.requestFullScreen(0)        }      }else{        if(this.videoDirect!=0){          plus.screen.lockOrientation('portrait-primary')        }      }}