解决微信小程序的video元素层级太高无法遮盖问题
解决微信小程序的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 ="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> ="login-img" :src="videoFrameSrc" mode="aspectFill" v-if="!showVideo" /> <cover-view> ="login-bg-mask"> </cover-view> <cover-view> ="title-text"> <cover-image> ="image" :src="imgSrc[0]" mode="aspectFill"> </cover-image> <cover-view> ="text">未来的路,有我伴你同行 </cover-view> </cover-view> <cover-view> ="center-box"> <cover-view> ="register-verify-tip">未注册手机验证后即完成注册 </cover-view> <cover-view> ="input-el"> </cover-view> <cover-image> ="phone" :src="imgSrc[1]" mode="aspectFill"> </cover-image> <cover-view> ="input-text">请输入手机号码 </cover-view> <cover-view> ="verify-el"> </cover-view> <cover-view> ="verify-text" @click="goto('/pages/secondary/getCode/index')">获取验证码 </cover-view> <cover-view> ="bottom-box" open-type="getUserInfo" @click="wxLogin"> <cover-image> ="weixin-icon" :src="imgSrc[2]" mode="aspectFill"> </cover-image> <cover-view> ="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 的组件样式才搞定。