对于前端开发,要是需求上有在视频组件上添加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')        }      }}