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