给“青年大学习”添加进度条

Woms
Woms 11月19日
  • 在其它设备中阅读本文章

总所周知的原因,青年大学习是每周的必看视频,同时,每次看着 ios 的同学都能轻松的拉进度条进行“逃课”,我们 Android 用户为什么就不能这样子干?
这里,就给各位送上在 Android 手机上如何把青年大学习的进度条给修复回来的一种方法。

第一步 方法构思
查看大学习的网页源代码,通过搜索<video>这个标签,得知了视频播放的有关信息,然后通过查询 MDN 里有关 <video> 标签的说明,在 这里 可以得知,只要给 <video> 标签添加一个controls属性,就可以给视频添加一个进度条了,我们的大学习里面的<video>标签,正好缺了这个属性。

第二步 测试想法:
对大学习的视频播放页进行测试修改,有两种方法进行修改,一种是抓包,一种是浏览器控制台,这里我选择浏览器控制台,在 PC 浏览器可以用F12快捷键调出控制台并进行修改,在测试之后成功加上了进度条。

第三步,手机实操
但是手机该怎么办?浏览器远程调试?没电脑怎么办?内置浏览器关闭了远程调试怎么办?在感觉毫无出路的情况下想到了 debugx5.qq.com 这个东西,什么是 debugx5,这个是腾讯 x5 内核的一个调试网页,打开之后在信息->TBS settings里面发现了一个打开vConsole调试功能的选项,打开之后重新打开任意网页,下面出现了一个绿油油的小按钮,点击之后是出现了一个控制台,但是这个控制台无法直接修改 html 标签的内容,但是可以执行javascript,这不就行了吗,直接执行 js 代码进行修改不就可以玩起来了吗!!
下面是 js 代码:
document.getElementById("Bvideo").controls="controls";
在大学习点击“开始学习”之前,在 vConsole 里执行上面的 Js 代码 ( 在command...里面粘贴,点击OK执行),在开始学习之后成功添加进度条!但是不能直接一次性拖到底部,不然会直接返回开头,但是如果拖到只剩下最后几秒,就可以跳过掉大部分的视频了,但是还有个小缺点,就是有个绿油油的“vConsole”按钮在,为了美观 (实际上就是截图交作业),又对上面的 Js 代码做了点小改动
下面是 js 代码:

document.getElementById("Bvideo").controls="controls";
document.getElementById("__vconsole").id='clear__vConsole';

执行了修改后的 Js 代码,成功给视频添加回了进度条,同时还隐藏掉了 vConsole,可以和 ios 的同学一样玩进度条了~

本文链接:https://woms.top/archives/126.html
This blog is under a CC BY-NC-SA 4.0 Unported License