如果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 底部有一丝白边问题。
}
}