uniapp中video层级太高(或者在页面中不跟随页面滚动)解决方案

我觉得这个问题有必要记录一下。最近项目中遇到的问题：项目是uniapp开发，有一个商品详情的页面和一个视频竖向轮播的页面。

问题描述

1、商品详情页上面是图片轮播(包含视频)，下面是商品详情，当页面上下滑动时，如果当前轮播是视频，那么视频就会停留在原位置 不会跟随页面滚动，小程序端是正常的，app端会出现这个问题。
2、视频竖向轮播的页面 (类似抖音) 上下滑动切换视频，视频上面有一些内容(返回按钮、视频标题、视频介绍等等)，但是在app端 视频会把这些内容都覆盖掉，显示不出来。小程序端是正常的。

问题原因

是因为 video 在app端为原生组件，原生组件层级太高 其他的组件盖不住它 用z-index也不管用！

官方解决方案

uni官方文档给了三种方法，一般网上查的也是这三种方法：
1、使用 cover-view 组件
2、新建 nvue 页面

3、使用 使用subNvue子窗体。

但是并不适用我目前的场景。

解决方案

把 video 组件 做成富文本内容解析出来。mp-html 富文本组件，插件市场可以下载。

// html 部分
 <mp-html ref="article" id="_root" :content="videoHtml(videoItem.contentMainImg, videoItem.videoPoster)" />
// js 部分
 videoHtml(videoUrl, poster) {
     return `<video class="video" poster="${poster}" src="${videoUrl}" :loop="${true}" :autoplay="${true}" object-fit="fill" style="width:100%;height:100%"></video>`;
 },

注意：video 富文本内容 需要加上封面参数，要不可能会出现 视频黑屏 加载不出来等问题。

总结

这个方法能适用一部分场景，但是也有不足：添加了封面参数的话，就会添加上视频的默认控件；不好监听视频的播放与暂停。。。

补充

如果用这种方法处理了，然后需求中又有需要操作视频(比如点击视频 暂停/播放 等) ， 把 video 组件做成富文本内容了，然后uni的video方法好像就不能用了。这时候可以尝试选择直接操作 dom 元素，直接操作dom的话，使用 uni.createSelectorQuery() 可以选择到 富文本 video， 但是使用不了video的方法。但是uni又没有 document 对象，这时候可以尝试使用renderjs来选择和操作dom，在 renderjs 中 可以使用 document 对象。