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

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

微信小程序开发之全屏显示
在开发微信小程序的时候,我们会遇到各种坑,但是,这个东东是中国人做的,so...会有很多解决方案来填坑,今天就来填个小程序开发组件全屏的坑. 问题我的小程序只有一个地图,如下代码,但他不是全屏的, ...
微信小程序背景图片全屏显示
微信小程序背景图片全屏显示很多人在写小程序界面的时候希望背景图片是全屏覆盖显示的(包括顶部导航栏,如下图),那该如何实现呢? 以下是实现代码: wxml代码: <view class=&quo ...
解决微信小程序video属性controls失效问题
解决微信小程序video属性controls失效问题参考文章: (1)解决微信小程序video属性controls失效问题 (2)https://www.cnblogs.com/lguow/p/92 ...
微信小程序 - 手持弹幕 | 全屏炫酷滚屏神器源代码模板，超详细代码和注释复制粘贴即可使用（全屏文字滚动，支持调节滚动速度、字体大小、字体颜色）文字内容横屏滚动，手机变身 LED 屏
前言网上大部分代码都很乱,而且都有 BUG,本文提供注释详细且干净整洁的源代码. 您可以直接复制源代码,几分钟轻松移植到您的项目中, 您可以根据自己的需求进行样式.逻辑的变更,代码注释非常详细, ...
【无标题】uniapp中页面跳转白屏微信小程序跳转白屏
微信小程序tab切换白屏这几个图标切换会出现短暂的白屏解决方法如下组件引入 1.先在common 下建立一个文件夹mixin 下 lodaingPlus.vue 组件 <template&g ...
解决微信小程序使用switchTab跳转后页面不刷新的问题
解决微信小程序使用switchTab跳转后页面不刷新的问题参考文章: (1)解决微信小程序使用switchTab跳转后页面不刷新的问题 (2)https://www.cnblogs.com/mmyk ...
# 解决微信小程序遮罩层底部页面滚动
解决微信小程序遮罩层底部页面滚动一.wxml文件添加catchtouchmove="move". <view class="" class=" ...
php小程序中的页面如何换行,解决微信小程序scroll-view换行问题
今天在写小程序的时候使用了scroll-view,但是发现在scroll-view中一行文字不能换行,代码如下: asdhadjhkajshdkjahsdkjasdajsdhkajsdkajsdkaj ...
解决微信小程序的video元素层级太高无法遮盖问题
解决微信小程序的video元素层级太高无法遮盖和show-play-btn属性失效问题今天在项目中遇到了这个问题,需要在微信小程序中用视频作为背景,微信开发者工具中模拟的没问题,真机调试就发现vid ...

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

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

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

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

最新文章

热门文章