微信小程序开发video遮罩功能（禁止拖动进度条）
痛点
在微信小程序的标签中，<video> 标签的默认层级相当高，很多自定义标签即使设定了 z-index，也无法覆盖在 <video> 标签上，特别是在视频进入全屏状态下时。
有些时候我们需要在视频上显示一些自定义内容，或者禁止用户拖动进度条（小程序开发中 <video> 标签只有禁止手势拖动的属性设置，没有直接禁止进度条拖动的属性设置），就需要能有遮罩盖在 <video> 标签上方。
网上有方法说给<video>标签加上属性 x5-video-player-type="h5-page" ，注意 x5-playsinline webkit-playsinline playsinline x-webkit-airplay="true" 都不要乱加，但是亲测发现并没有什么效果。
<cover-view> 标签
微信开发者文档地址：https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html
微信小程序开发团队提供了 <cover-view>标签，可实现覆盖在原生组件之上的文本视图。用于解决上述问题。可覆盖的原生组件包括 map、video、canvas、camera、live-player、live-pusher，只支持嵌套 cover-view、cover-image，可在 cover-view 中使用 button。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。
1、使用场景：在 web-view & 原生组件上做一些简单的操作
2、cover-view 标签有误时，并不报错
3、cover-view 不支持组件开发(只支持嵌套 cover-view、cover-image、button)
4、cover-view 的显示隐藏用 v-if(v-show: 无法实现显示隐藏的切换)
5、cover-view 覆盖在 web-view 上使用时，安卓 微信7.0.9版本后，无法通过setData更新{undefined{xx}}值
6、文本必须都套上 cover-view 标签，避免排版错误
注意事项1
- App 端 vue 页面
cover-view、cover-image中不支持嵌套其它组件，包括再次嵌套cover-view，仅可覆盖video、map。App 端 nvue 页面自 2.1.5 起没有这些限制。 - App 端
cover-image使用本地图像的话，打包前需要设置资源为释放模式，在 manifest 文件内 app-plus 新增 runmode 节点，设置值为 liberate。 - App 端还可以使用 plus.nativeObj.view 绘制原生内容，参考:uni-app中使用5+界面控件 (opens new window)、plus.nativeObj.view规范(opens new window)
- App 端还提供了更灵活和强大的
subNvue，参考 原生子窗体subNvue - 在 video 组件中使用时，若想在全屏模式下使用
cover-view，只有在微信小程序、App 端的 nvue 页面可实现。 - 在App 端，如果重度使用 video 和 map，推荐使用 nvue 页面。
- 百度小程序 iOS 端暂不支持一个页面有多个 video 时嵌套 cover-view。
- 支付宝小程序中
cover-view不支持嵌套。
注意事项2
- cover-view 和 cover-image 的 aria-role 仅可设置为 button，读屏模式下才可以点击，并朗读出“按钮”；为空时可以聚焦，但不可点击
- 基础库 2.2.4 起支持 touch 相关事件，也可使用 hover-class 设置点击态
- 基础库 2.1.0 起支持设置 scale rotate 的 css 样式，包括 transition 动画
- 基础库 1.9.90 起 cover-view 支持 overflow: scroll，但不支持动态更新 overflow
- 基础库 1.9.90 起最外层 cover-view 支持 position: fixed
- 基础库 1.9.0 起支持插在 view 等标签下。在此之前只可嵌套在原生组件 map、video、canvas、camera内，避免嵌套在其他组件内。
- 基础库 1.6.0 起支持 css transition动画，transition-property 只支持 transform (translateX, translateY) 与 opacity。
- 基础库 1.6.0 起支持 css opacity。
- 事件模型遵循冒泡模型，但不会冒泡到原生组件。
- 文本建议都套上 cover-view 标签，避免排版错误。
- 只支持基本的定位、布局、文本样式。不支持设置单边的 border、background-image、shadow、overflow: visible等。
- 建议子节点不要溢出父节点
- 支持使用 z-index 控制层级
- 默认设置的样式有：white-space: nowrap; line-height: 1.2; display: block;
- 自定义组件嵌套 cover-view 时，自定义组件的 slot 及其父节点暂不支持通过 wx:if 控制显隐，否则会导致 cover-view 不显示
不支持的 CSS
- position: fixed
- opacity
- overflow
- padding
- linebreak
- white-space
注意：nvue的cover-view不在上述限制中，它仅支持且全部支持nvue的所有css。
示例代码
<template>
<view class="page">
<video class="video" id="demoVideo" :controls="false" :enable-progress-gesture="false" :show-center-play-btn="true" src="https://xxx.mp4">
<cover-view class="controls-title">简单的自定义 controls</cover-view>
<cover-image class="controls-play img" @click="play" src="/static/play.png"></cover-image>
<cover-image class="controls-pause img" @click="pause" src="/static/pause.png"></cover-image>
</video>
</view>
</template>
禁止拖动进度条
在小程序开发时，会遇到这样的需求：用户只能老老实实看视频，不能拖动进度条。在微信开发者文档中，<video> 标签的 enable-progress-gesture 属性为 false 时，可禁止控制进度的手势，但是并未提供直接禁止拖动进度条的属性，若将 controls 属性设为 false，则是直接不显示播放/暂停按钮、播放进度、时间，虽然实现了禁止拖动的功能，但用户体验很不友好。
实现思路
设置一个遮罩，覆盖在进度条的位置。在通常情况下，定义一个 <view>，蒋 z-index 设置为 999 是可以盖在 <video> 标签上的，但是当视频全屏播放时就失效了，因为全屏播放的视频显示层级相当高。这时就需要 <cover-view> 标签。
<cover-view>标签 写在 <video> 标签内，设置固定的位置以及长宽即可。全屏时会随着视频旋转一起旋转，设置长宽最好用百分比的形式，这样全屏时会随着视频大小一起变化，完美解决。
代码示例
<template lang="pug"> <view class="section"> <video id="video-play" class='video-play' src="xxxx"> <cover-view class='cover' ></cover-view> </video> </view> </template> <style> .cover3 position: absolute; bottom: 0px; z-index: 998; height: 20%; margin-left: 60px; //- 左边60px不遮罩，用户仍可点击播放暂停 width: 70%;//- 右边留出一点，用户仍可点击全屏、退出全屏 </style>
