我写了一款谷歌浏览器插件

一款可随意调节百度网盘在线播放视频速度的谷歌浏览器插件。

图 版本V1.0.2

前言

最近一直在看百度云盘上的网课,当想倍速播放的时候却发现没有这个功能。然后就在网上找到了一段可以调整播放速度的 JS 代码。

//调整播放速度为 1.5xvideojs.getPlayers("video-player").html5player.tech_.setPlaybackRate(1.5)

将这段代码拷贝到浏览器的 Console 中按下回车键确实可以使用。但是当我用了两次之后就发现,实在受不了这种重复而且相当不灵活的操作。还有一个问题是计算机相关专业的大多数同学会使用这种办法,但是应该还有很大一部分同学并不知道怎么用。然后我就考虑自己做个谷歌浏览器插件来灵活的调节播放速度,不但可以方便自己也能够方便他人。尽管我当时还不知道浏览器插件的工作机制,但是看到各种各样的插件都实现了相当复杂的功能后,我认为技术上应该是可以的。那么接下来就要找谷歌浏览器插件开发文档去学习了。

展示

一个半小时后做出来了特别low的 V1.0.1 版本,下面红框中的部分为插件面板。

图 版本V1.0.1

现在是可以用了,但是有轻微强迫症的我想再完善一下。从产品体验上来说这一版本是很差劲的,因为调节一次速度既需要键盘又需要鼠标。一个好的产品使用起来怎么可能这么麻烦,能一只手完成的事情绝不用两只手来做。

又半个小时后,V1.0.2 出来了,下面是视频演示(视频大约9M,有声音)

(视频无法添加,观看请点击这里

原理

为插件面板上的进度条绑定事件,当滑动时将数值传递给后台的 controlVideo.js 文件.然后将数值与上述关键代码拼接后插入到当前页面中,视频播放速度就会相应变化。当然还有许多细节方面的处理,包括当再次打开插件面板时会将当前视频播放速度的大小体现在进度条上等。

注:有想自己做插件的同学可以把这款插件当作Demo,不是因为代码写的有多好,而是程序中用到的方法应该适用于大多数简单插件的开发。)

下载

安装使用

  1. 将下载的文件解压。
  2. 打开谷歌浏览器,点击窗口右上角的三个小点,然后点击「更多工具」,接着点击「扩展程序」。这时你在界面上应该可以看到「加载已解压的扩展程序」按钮(如果看不到就把右上角的「开发者模式」打开,如果打开之后仍然看不到那就打开百度,搜索“附近有哪些眼科医院?”哦,不行!这种问题还是问谷歌比较安全一些。如果发现谷歌不能用,那你一定没看我这篇文章 【推荐】不翻墙如何免费使用谷歌搜索引擎?… ...)。
  3. 看到「加载已解压的扩展程序」后然后点击它,在弹出的窗口中选择你刚刚解压后的文件。 (注:解压后的文件就不要动了,一旦删除或移动位置那么谷歌浏览器中的插件将不能使用。所以一开始的时候就应该放置一个比较“安全”的地方。)
  4. 使用方法,参考上面演示视频即可。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏音视频技术

移动端视频缓存保障与CDN调度优化

我是来自网易云信的张根宁,今天我将会站在用户的角度来跟大家探讨播放器的相关优化,也会详细阐述网易云信团队在播放器方面都做了哪些努力。

28320
来自专栏媒矿工厂

使用开源库构建自定义视频体验

本帖来自VES(Video Engineering Summit)2019的演讲,主要内容是使用开源库构建自定义视频体验(Building A Custom V...

9230
来自专栏阿策小和尚

解决 Android PLMediaPlayer 视频播放异常小结

和尚最近一直在处理一个比较纠结的问题,项目中接入了七牛云视频SDK PLMediaPlayer,七牛云视频SDK是很强大的一款三方视频库。 ...

7210
来自专栏视频咖

CDN(直播)日志实时分析解决方案 免费内测开放

CDN日志实时分析解决方案 免费内测正式开放。 想对该解决方案有更深入的了解吗? 看小编分解↓↓↓ 快速了解CDN日志实时分析解决方案 方案简介 通过对CDN...

11830
来自专栏微卡智享

【超级干货】Delphi轮播视频和图片程序(用于双屏显示程序)

前面一章我们学习了delphi 使用windowsmediaplayer播放视频,这次我们直接用实战演练,文章的最后我会把源码的下载地址放上。我们今天来做一个程...

24640
来自专栏云优惠视频

腾讯云视频点播套餐包优惠--腾讯云最新优惠

腾讯云点播存储资源包售卖方式为包年,即购买存储资源包后会获得相应的存储容量一年的使用权限,系统会每天对您占用的存储空间进行统计,在资源包容量之内的不再进行扣费,...

27240
来自专栏微卡智享

C++ OpenCV实现视频播放位置跳转

前面我们学习了OpenCV通过VideoCapture类进行视频播放,并且加入了随机的播放时间一些小的知识。今天我们在视频播放的基础上实现播放位置的跳转。我们这...

10040
来自专栏云服务器购买

云点播-腾讯云点播服务

腾讯云点播(Video on Demand,VOD)是集音视频上传、直播录制、媒体资源管理、自动化转码处理、视频 AI、分发加速、播放器 SDK 于一体的一站式...

61300
来自专栏布谷科技

如何快速实现移动端短视频源码系统功能?

在“互联网+”概念被炒的如火如荼的今天,短视频以视频短、传播快、生产流程简单、制作门槛低、参与性强等特点在互联网所有的热门的焦点中脱颖而出,出现在公众的视野里。...

8420

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励