【前端】只需三步教会你拖动学习通的视频进度条（超级详细步骤+原理分析）

​本文已参与「新人创作礼」活动，一起开启掘金创作之路。

11月了，我看身边的好多小伙伴都在“沉迷”网课（赶进度），而且有同学吐槽超星学习通2020之后的版本都取消了拖动进度条这个功能，很多小伙伴只能活生生1倍速看完所有网课，我实在看不下去了，今天教给大家一个很简单的方法——三步教会你拖动学习通的视频进度条。

网页其实本质上都是一套前端代码，前端代码包括三部分————HTML5、CSS3以及JavaScript，其中HTML构成了网页元素的基本框架，CSS为网页披上了华丽的外衣，JS则为用户交互提供了保障。

所以这么看来，视频进度条不能拖动这个问题应该就是学习通在设计网页时就设计好的，目的很显然了，具体做法肯定在源代码里有设置，所以我们的目标就是找到源代码中对视频进度条限制的设置，将它取消。

学习通在这方面使用的是DOM中的fast-forward变量进行相关设置，如果变量fast-forward=true，那么这个视频的滚动条将不支持拖动，我们的解决方法显然就是去对这个变量进行删除或者更改。

HTML DOM forward() 方法

①进入视频播放页面，先不用急着点开视频，我们需要更改一下原来的网页设置

按F12或者鼠标右键点击“检查”（Chrome浏览器中这个选项是“进入开发者模式”）

界面右侧弹出

​编辑

②如何在复杂的代码里找到我们要更改的变量?

按下Ctrl+F键，弹出辅助搜索框，输入

目标代码就找到了

③鼠标移动到目标代码上，右键点击“Edit as HTML”

把fastforward=true这一句代码删除，其他不变

​

回到视频播放页就会发现滚动条可以拖动了（直接拖到最后即可完成任务点）

​

​