巧用h5的video倍速播放功能

作者: 张阳君 分类: 前端技术

我是一个非常看重工作效率的前端,而公司的人事总是要变着法搞各种活动来影响你的工作节奏。这不,最近又收到了参加某视频学习的政治任务。为了更加愉快地度过这个周末,我决定拿起技术的武器回击(其实也没啥技术含量)...

巧用h5的video倍速播放功能

这次布置的在线学习任务,需要看完100多分钟的视频才能考试。因为视频流由后台控制,所以没有办法点击进度条跳过。我用chrome审查了一下元素,播放器是用h5的video标签实现的,也许可以尝试一下video的倍速播放功能...

这里先讲知识点,video视频可以通过js来控制播放速率,代码如下:

videoDOM.playbackRate = 2.0; // 2倍速度播放

注意:音频也能用这个方法进行倍速播放!

我们获取video节点之后,一行代码就能让视频快速播放了,是不是特别666。那么怎样才能把这行代码插入到在线网站中呢?其实也非常简单,我们用chrome打开该网站的控制台,在控制台里面,可以直接用js操作页面:

var videoDOM = document.getElementById('xxx');

另外,我们也可以借助tampermonkey之类的chrome插件来执行插入代码。我曾经用tampermonkey收集过游戏数据,做过自动翻页等功能,非常强大。

写完代码之后,敲回车,视频就开始加速了!调整倍速播放的数值,你将获得更爽快的体验!但是如果你的播放速度比下载速度还快的话,视频会卡住不动,所以数值一定要设置合理。这样一来,100多分钟的视频,我花了10来分钟就搞定了。挂机都比别人效率,真的太佩服自己了(不要脸,哈哈)!

运用技术去解决生活中的烦恼是每个程序员体现自我价值(装逼)的手段之一,加油吧,骚年!

(全文完)

0 条评论
回复
支持 Markdown 语法
暂无评论,来抢个沙发吧!