小程序学习——cover-view和cover-image

使用video组件播放视频，表层有一层遮罩
借鉴https://www.jianshu.com/p/232d3e72c520
video作为原生组件，层级最高，使用z-index也不能改变叠放
cover-view只能嵌套相同cover-*的组件和button

<video src="http://xxx.mp4">
    <cover-view>
        当前正在使用非wifi环境，观看需要使用手机流量
        <button>使用流量播放</button>
   </cover-view>
</video>

调整好css后发现，button并不能挡住video组件正中间的播放按钮，对比同类的实现产品，应该是增加了一层遮罩，显示视频预览图，点击播放后消失，于是增加一层cover-image

<video src="http://xxx.mp4">
   <cover-view>
      当前正在使用非wifi环境，观看需要使用手机流量
     <button>使用流量播放</button>
   </cover-view>
   <cover-image src="http://xxxxx.jpg"></cover-image>
</video>

通过定位将遮罩的图片铺满video组件，但是产生了以下几个bug：

bug1：使用z-index将按钮和标题放在遮罩之上无效
bug2: 编辑器预览正常，但是真机调试后发现图片被cover-view内的标题文字压了下去

解决办法

通过view生成一个跟video等高等宽的块，在view内实现需要的功能，然后再使用wx:if和wx:else去控制提示和视频的显示，可以很轻松的实现想要的效果