微信小程序开发video遮罩功能（禁止拖动进度条）

痛点

　　在微信小程序的标签中，

　　有些时候我们需要在视频上显示一些自定义内容，或者禁止用户拖动进度条（小程序开发中 

　　网上有方法说给

标签

微信开发者文档地址：https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html

 　　微信小程序开发团队提供了 标签，可实现覆盖在原生组件之上的文本视图。用于解决上述问题。可覆盖的原生组件包括 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。

示例代码

禁止拖动进度条

　　在小程序开发时，会遇到这样的需求：用户只能老老实实看视频，不能拖动进度条。在微信开发者文档中，

实现思路

　　设置一个遮罩，覆盖在进度条的位置。在通常情况下，定义一个 ，蒋 z-index 设置为 999 是可以盖在 

　　 标签 写在 

代码示例

<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>