被层级过高的video遮盖住的问题

uniapp开发的小程序里面的标签出现滑动渲染问题，网上查了一下，解决方案一般就三种，方案1：使用nvue编写界面；方案2：subnvue；方案3：使用h5 video。我尝试将页面用nvue重新编写了一遍，行不通，用方案3的v-html的方式也不行，换成rich-text还是不行，后来用mp-html终于可以了，

<view class="item-video" v-if="item.videoUrl">
     <mp-html :content="getVideoHtml(item.videoUrl)" />
</view>

methods: {
    getVideoHtml(label) {
            return `<video src="${label}"></video>`
    }
}

但是又遇到了新的问题，由于video原生组件层级太高，盖住了弹出的评论蒙层，这里用cover-view解决

<u-popup v-model="showComment" mode="bottom">
    <cover-view class="commentPop" v-if="showComment">
            <comment @sendMessage="sendMessage"></comment>
    </cover-view>
</u-popup>

虽然外层容器能覆盖video组件了，但是comment组件里面的input却显示不出来，查阅资料发现，input在聚焦状态时层级是最高的，所以将input设置为自己获取焦点。不知道为啥input的背景色不能显示，于是又写了一个cover-view用于设置input样式。

<template>
	<cover-view class="comment-input">
		<cover-view class="hide" :style="{'color': changeColor ? '#fff' : '#888888'}">{{commentContent}}</cover-view>
		<input type="text" v-model="tip"
		 class="content"  @blur="inputBindBlur" :focus="true" @input="tapInput" />
	</cover-view>
</template>
<style lang="scss">
	.comment-input {
		margin: 30rpx 30rpx 60rpx;
		border-radius: 40rpx;
		background: #F8F8F8;
		padding: 15rpx 30rpx;
		color: #888888;
		.hide {
			height: 45rpx;
			line-height: 45rpx;
		}
		.content {
			height: 45rpx;
			line-height: 45rpx;
			margin-top: -45rpx;
		}
	}
</style>

注：如果遇到底部固定定位的评论栏还是被上下滑动的视频遮盖住的问题，cover-view可以通过v-if重新创建一下，video和cover-view都是原生组件，层级是后插入的在上面。

系统兼容性问题： 后续测试过程中发现，ios手机样式没问题，但是安卓手机样式有问题，而且由于input被覆盖都是无法看到焦点的，这里可以将input换成textarea就可以解决问题了。