由于 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>
对应的 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;
}
}
}