解决微信小程序的video元素层级太高无法遮盖和show-play-btn属性失效问题

今天在项目中遇到了这个问题，需要在微信小程序中用视频作为背景，微信开发者工具中模拟的没问题，真机调试就发现video的层级太高，其他元素设置 z-index 都低于 video

微信官方文档提供的解决办法

因为微信小程序的 video 原生组件层级太高，无法用 z-index 层叠。所以可以使用 <cover-view> <cover-image> 作为覆盖在原生组件之上的文本视图元素

可覆盖的原生组件包括 map、video、canvas、camera、live-player、live-pusher

比如，我要在登录页面的底层给一个video（使用了uni-app框架）

         <video class="login-video" object-fit="cover" :muted="true" :autoplay="true" :loop="true" :src="videoSrc":show-fullscreen-btn="false" :enable-progress-gesture="false" :show-progress="false":show-play-btn="false" :show-center-play-btn="false" bindplay="onPlay"><cover-image class="login-img" :src="videoFrameSrc" mode="aspectFill" v-if="!showVideo" /><cover-view class="login-bg-mask"></cover-view><cover-view class="title-text"><cover-image class="image" :src="imgSrc[0]" mode="aspectFill"></cover-image><cover-view class="text">未来的路，有我伴你同行</cover-view></cover-view><cover-view class="center-box"><cover-view class="register-verify-tip">未注册手机验证后即完成注册</cover-view><cover-view class="input-el"></cover-view><cover-image class="phone" :src="imgSrc[1]" mode="aspectFill"></cover-image><cover-view class="input-text">请输入手机号码</cover-view><cover-view class="verify-el"></cover-view><cover-view class="verify-text" @click="goto('/pages/secondary/getCode/index')">获取验证码</cover-view><cover-view class="bottom-box" open-type="getUserInfo" @click="wxLogin"><cover-image class="weixin-icon" :src="imgSrc[2]" mode="aspectFill"></cover-image><cover-view class="weixin-text">微信一键登录</cover-view></cover-view></cover-view></video>

就像这样，在 video 组件内部使用 <cover-view> <cover-image> 来代替 <view> <image> 就可以把 cover-view 内部的元素显示在 video 元素之上

防止踩坑

要为每一个 <cover-view> <cover-image> 设置样式！！！这是血淋淋的教训，我调试了三个小时找bug

Gif效果图

2022/1/23更新
如果覆盖 video 的元素都使用 <cover-view> 和 <cover-image> ，恭喜你，喜提Bug一枚 ^ ^
后续，里面需要有一个Input框输入，微信开发者工具中模拟的一点问题都没有，到了真机调试就出问题了，还是覆盖不了input，原生input微信小程序的 <cover-view> 无法嵌套，裂开…

解决办法： 在 video 外层使用一个 positoin:absolute; top:0; left:0; width:100vw; height:100vh; 的盒子占满屏幕，然后将input等其他要覆盖 video 的元素放在这个盒子里就可以了，之前疯狂搜索微信小程序官方文档的 <cover-view> 和 <cover-image> 方法，同级渲染，各种踩坑，还好有另外一个上线的微信小程序项目也实现了这种效果，我看了一下源代码后穿透 uView 的组件样式才搞定。

解决微信小程序的video元素层级太高无法遮盖问题相关推荐

解决微信小程序textarea层级太高遮挡其他组件的问题
解决微信小程序textarea层级太高遮挡其他组件的问题参考文章: (1)解决微信小程序textarea层级太高遮挡其他组件的问题 (2)https://www.cnblogs.com/pansid ...
uniapp 判断页面是否是横竖屏,解决微信小程序video组件全屏播放视频遮盖自定义播放控件问题
如果res.deviceOrientation 等于landscape 的话是竖屏,portrait则是横屏.因为用户每旋转一次屏幕就会触发里面的onShow钩子,因此在页面显示或横竖屏变化都会触发这 ...
解决微信小程序video属性controls失效问题
解决微信小程序video属性controls失效问题参考文章: (1)解决微信小程序video属性controls失效问题 (2)https://www.cnblogs.com/lguow/p/92 ...
解决微信小程序IOS中使用picker弹出内容和手机软键盘重叠的问题
解决微信小程序IOS中使用picker弹出内容和手机软键盘重叠的问题项目需求: 一个信息提交页面:有input输入框,有picker选择器遇到的问题: 点击input输入框时,手机自动弹出键盘,但 ...
微信小程序：video标签默认显示视频的第一帧作为封面
微信小程序:video标签默认显示视频的第一帧作为封面 <video src="video_url"controls="{{false}}"initial ...
解决微信小程序配置https不成功问题
解决微信小程序配置https不成功问题参考文章: (1)解决微信小程序配置https不成功问题 (2)https://www.cnblogs.com/ant-jmf17/p/8056989.html ...
解决微信小程序使用switchTab跳转后页面不刷新的问题
解决微信小程序使用switchTab跳转后页面不刷新的问题参考文章: (1)解决微信小程序使用switchTab跳转后页面不刷新的问题 (2)https://www.cnblogs.com/mmyk ...
“完美”解决微信小程序购物车抛物动画，在连续点击时出现计算错误问题，定时器停不下来。
"完美"解决微信小程序购物车抛物动画,在连续点击时出现计算错误问题,定时器停不下来. 参考文章: (1)"完美"解决微信小程序购物车抛物动画,在连续点击时出现计 ...
解决微信小程序银行卡号输入转换格式
解决微信小程序银行卡号输入转换格式问题 ps:2017-02-17 19:44 (发现新bug,暂已解决优化中) 新手第一次写博客,请多多见谅! (感觉会有更好的办法,希望有大牛能对我指点指点) 输入 ...

解决微信小程序的video元素层级太高无法遮盖问题

解决微信小程序的video元素层级太高无法遮盖和show-play-btn属性失效问题

微信官方文档提供的解决办法

防止踩坑

Gif效果图

解决微信小程序的video元素层级太高无法遮盖问题相关推荐

最新文章

热门文章