解决微信小程序的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 的组件样式才搞定。