【亲测有效】支持横竖屏 微信小程序video禁止进度条拖动，微信小程序遮罩进度条，

发布时间：2023年12月18日

背景：部分课程禁止客户拖动视频进度条直至播放结束

红色是遮罩区域遮罩区域

测试遮罩效果

实际遮罩效果（有一个很浅的阴影区域）

在这里插入图片描述

实现代码

.wxml文件

<video enable-progress-gesture="false" >
        <cover-view  class="cover"></cover-view>
      </video>

.wxss文件

.cover{
  position: absolute;
  bottom: 0;
  z-index: 998;
  height: 20%;
  background-color: red;
  left: 10%;
  background-color: rgba(255, 255, 255, 0.007);
  width: 80%;
}

background-color: red;是为了方便调试的时候使用可删除
.cover中的width可调整大概位置在70-80之间

文章来源:https://blog.csdn.net/gjwgjw1111/article/details/134911042
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章