微信小程序 video层级过高问题（手机版本兼容）

问题描述：

小程序中使用了 video 标签进行视频展示，点击按钮出现弹框，但是视频却还在弹框之上显示

原因：

因为原生组件的使用限制，原生组件的层级是最高的，所以页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上，故video 视频展示出现了弹框之上

解决方法：

• cover-view 与 cover-image
  为了解决原生组件层级最高的限制。小程序专门提供了 cover-view 和 cover-image 组件，可以覆盖在map、video、textarea、canvas等部分原生组件上面，只支持嵌套cover-view、cover-image。

• hidden 属性控制

 <view class="cf-flex-row section_14" v-for="(item, i) in detailList || []"
   :key="i" @click="() => openRoom(item)"> 
    <video @click.stop class="image_11" v-if="item== 'mp4'" :hidden="videoHidden"// 可通过此熟悉控制层级过高问题
       :src="item.fileKey"
       @error="videoErrorCallback" />
     <image class="image_11" v-else-if="item.thumbnailPicUrl"
      :src="item.fileKey"  /> 
 </view>

//
  async openRoom (item) { 
       let rectInfo =await this.$u.getRect('.detailBox')   // 动态获取u-view 元素在屏幕中的的宽高度等
       this.topHeight=rectInfo.top  //可动态控制某元素的宽高等
       this.videoHidden=true    //根据需求动态控制 video 的显隐，来实现层级过高的问题控制
      this.visible = true  // 弹框的显示（需求是在 video 的上面显示） 
    },