前言
本文主要介绍在微信小程序中，视频播放时如何禁止手动拖动进度条。由于我项目中的视频用的是引入的视频插件，不是直接用的
<video>标签，与网上能搜到的此类解决方案不太一样，不过原理相同，差异不大，特此分享。其中所使用的视频插件也是我司自己开发，完美继承小程序原生
<video>的所有特性和事件。
一、需求背景
最近在做小程序项目的迭代，我们的小程序属于学习培训类，所以会有视频学习的模块。要求 视频第一次观看不支持快进，已观看过的内容重复观看支持快进 。
先展示下我们的视频详情页面：
二、解决思路
根据需求，首先前端需要拿到一个状态进行判断，用户是否是第一次观看视频，如果是第一次观看视频，则不允许拖动进度条；已观看过的视频则正常拖动，不作限制。
思路有了，接下来按照步骤实现即可。
三、解决方法
- 首先在
js文件中声明一个变量studyStatus，作为是否能拖动进度条的判断依据：
-
然后在页面初始化请求接口后，从接口中获取并赋值。
-
html中，与视频标签同级可以加一个view，用来遮挡住进度条：
注：
<t-video>就是引入的视频插件。
<view wx:if="{{studyStatus !== 2}}" class="{{cover}}"></view>
- 在
css中加入样式：
.courseDetail .palyArea .cover {
position: absolute;
bottom: 4rpx;
width: 450rpx;
height: 20%;
background-color: rgba(255, 255, 255, 0.007);
margin-left: 100rpx;
z-index: 1;
}
- 这样就完成了。我们可以先将上面的背景色改一下颜色（改为红色），看下效果：
在视频标题后面，加上studyStatus方便查看当前该视频是否已被观看过：
而“已完成”状态的视频则不会出现遮挡条：
四、关于我在网上看到的其他方案
- 在播放器里面加了
cover-view：
此方案在我这是行不通的，应该是由于我用了视频插件的原因。
如果我按照上图的方式加入cover-view或者view标签，从控制台可看到，并没有显示有新添加的元素。
但是这两种方案的原理是相同的，都是在进度条上面放一个遮挡物。
五、总结
所以说，有时候虽然可能需求一样，但是由于项目结构或者其他原因，同一种需求的解决方案并不一样。前路漫漫，一起加油啊！
以上，希望对大家有帮助！
