uniapp 微信小程序解决video层级过高的问题（真机模式也可也以）

最近用uniapp做项目有个需求，在页面中加入MP4格式的动画。用uniapp原生组件引入视频，遇到几个问题，搞了很久。

1.首先是引入视频的地址需要的是网络地址，本地的显示不出来，需要放在公司的服务器或者阿里云腾讯云。

 

2.因为视频的尺寸比较大，占据整个页面，相当于充当背景那样的一个角色，所以设置了宽高都为100%。引入视频之后，页面中的其他元素被遮盖，不显示出来，z-index不起作用。查了下发现是video元素组件的层级是最高的，z-index无论设多大都不能将它覆盖。

 

3.video播放视频的时候会出现卡顿的情况，播一段，缓冲一下，再播一段，交互不好。

 

4.动画在开发者工具上可以一直循环播放，但是在真机模式下不生效，只播放一次，设置了loop的话，页面上会显示一个加载的红圈圈。（未解决）

问题2的解决办法：

使用cover-view视图来覆盖视频。不过需要注意的是，cover-view需要放在video组件内部，不然就不能覆盖在视频上，会把视频顶下去。

类似这样的写法：

<video autoplay="true" object-fit="cover" muted="true" :src="src" :controls="false" :custom-cache="true">
	<!-- 文本 -->
	<cover-view class="temp">36°</cover-view>
	<cover-view class="pren">50%</cover-view>
					
	<!-- 图片 -->
	<cover-image src="../static/windMiddle.png" class="img1"></cover-image>
	<cover-image src="../static/windWeak.png" class="img2"></cover-image>
	<cover-image src="../static/windStrong.png" class="img3"></cover-image>
</video>

cover-view 和cover-image需要放在video里面，放外面会有问题。在video里面，样式和位置可以随便设置。cover-view用于存放文本，cover-image存放图片，有个问题就是，cover-view和cover-image不能相互嵌套。

 

问题3的解决方法：

视频播放的时候会卡顿，视频大小19M，一开始以为是插件的问题，查阅了大量资料都没能解决，也换了插件还是没用，就用了最蠢的方法，把视频的清晰度降低了，变为6M，完全不卡顿了，视频播放正常。

 

第4个问题真的弄不出来，改需求了…有方法的欢迎指教学习。

还有个问题是，使用了video之后，使用pop做弹层就会失效，用showModal模态框取代了。有更好的解决办法的希望能多指教学习~~~