微信小程序中video全屏遮罩

由于 video 的层级非常高，所以使用 cover-view 来实现，非全屏时支持同级遮罩可以直接同级使用 view 实现。

下面实现全屏遮罩

cover-view 需要嵌套在 video 中

<video ref="video" id="video"
       :title="courseData.title"
       :poster="courseData.thumb"
       object-fit="cover"
       show-mute-btn
       enable-play-gesture
       :enable-progress-gesture="false"
       :src="courseData.videoUrl"
       style="width: 100%"
       @timeupdate="onVideoTimeUpdate"
       @play="onVideoPlay"
       @fullscreenchange="onFullScreenChange">
  <cover-view class="timeout-mask cover" v-if="timeoutMaskStatus" @click="handleTimeoutMask">
    <cover-view>点击继续播放</cover-view>
  </cover-view>
</video>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

对应的 css，发现微信小程序在视频全屏时默认 cover-view 的 visibility 值为 hidden 造成了无法显示，故添加了 visibility 为 visible（不知道是不是某些依赖的问题，尽量添加避免吧）

.timeout-mask {
  z-index: 9999999;
  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(10px);
  font-size: 20px;

  &.cover {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    visibility: visible;
    background-color: rgba(0, 0, 0, .3);
    color: #ffffff;

    cover-view {
      visibility: visible;
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23