微信小程序开发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>