痛点

  在微信小程序的标签中,​​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>