uniapp 判断页面是否是横竖屏,解决微信小程序video组件全屏播放视频遮盖自定义播放控件问题

如果res.deviceOrientation 等于landscape 的话是竖屏，portrait则是横屏。因为用户每旋转一次屏幕就会触发里面的onShow钩子，因此在页面显示或横竖屏变化都会触发这函数，来判断是否是横竖屏；

onShow(){
 uni.onWindowResize(res => {
      // portrait 竖屏 landscape 横屏   将状态值存储到这个this.landscape变量中 
      this.landscape = res.deviceOrientation === 'landscape';
    });
}

解决微信小程序video组件全屏播放视频遮盖自定义播放控件问题

关于这个问题我也试过很多种方法，基本都是没啥作用。 目前我只知道一种方法，就是直接将自定义视频播放控件/要在展示在视频上面的内容 直接定义在 video标签里面。

<video>
直接将要在视频上面展示的内容 定义在这里即可（这样写可能会报错-渲染层错误，但是不影响功能）
</video>

uniapp 获取当前页面路由：

xxxx =this.$mp.page.route;

解决H5项目video标签横屏播放视频高度异常问题（出现垂直滚动条）。

给父组件设置 width: 100vw; height: 100vh; 给video标签设置 width: 100%; height: 100%; object-fit: fill;
我这里只需要横屏播放，所以没有做其他处理，这样写竖屏播放样式会有问题。

 .videoMian {
    position: relative;
    box-sizing: border-box;
    padding: 0;
    width: 100vw;
    height: 100vh;
    // height: calc(100% - 57px);
    video {
      width: 100%;
      object-fit: fill;
      height: 100%;
      display: block; // 这个是解决video 底部有一丝白边问题。
    }
    }