android uc浏览器demo_倍速播放Canvas视频——一种通过浏览器插件的实现

1.前言

最近到了期末季，难免开始复习准备考试。交通大学的教学平台非常人性化的提供了课程回放功能，可以有效的帮助我们复习。不过平台播放窗口提供的可交互操作非常有限，仅包含了基本的开始，暂停，进度，全屏功能，并不支持倍速。

仔细观察不难发现，实际上交通大学教学平台的视频回放部分是由HTML5提供的Video标签实现的，H5中的视频本身是支持倍速播放的，只要let video = document.getElementById(′xxxid′), 然后再来一个video.playbackRate=1.5, 就可以手动调整倍速了。

但这并不算用户友好，打开控制台灌脚本也不够体面。因此我们想到了制作浏览器插件来实现调整倍速。

实际上制作浏览器插件非常容易，只要会前端三大件就可以，换言之，有手就行。关于视频播放的插件也不胜枚举，我只是想顺便熟悉一下插件制作流程，产品也很难与同类插件竞争。

2.浏览器插件

通俗的说，浏览器插件由一个Manifest.json文件以及一系列HTML/CSS/Javascript 文件组成。其中核心就是这个manifest.json配置文件。写过Android的朋友听名字就能意识到此文件的重要性。有大佬详细总结了插件开发的各个组件，参考此链接，我们也参考了许多这个博文。

一个标准的manifest.json如下所示。

{