1024，记一次自驱开发-浏览器开发实战

前言

领导给每个人下发任务，要观看视频网站教程，并且看完所有整个课程。
去瞄了下网站，正常看完要两三天时间。关键是网站做了限制，课程不能多窗口打开，不能快进，反正能限制的它都有限制了。
课程数还超多，如果是单纯挂载后台，可能也会忘了点到下一个课程。
有人说为什么不好好去学习课程。不好意思，平时日常任务正常要完成，对应网站教程还是一些跟职业有点出入的。。

为了解放自己的时间，成了促使去翻源码的动力

目标

• 连放
• 多窗口播放
• 正常记录课程时间 [这是后续追加的目标项]

调研

注：本篇仅调研记录自己实战的思路，其中某些敏感步骤不做详解。

• 如果能多窗口播放，连放的重要程度没那么高，这个可以往后挪一挪。
• 这类点播平台，一般都有一个播放器，播放器实例在初始化的时候可以开启更多参数，例如：快进、倍速等。这个平台有3个播放器引入，根据接口返回的不同视频源来确定播放器。
• 根据多窗口操作的提示语，找到源码处。其实是视频播放后定时去调用后台接口检测，根据接口返回弹出提示。
• 尝试注释掉弹窗及视频终止代码，视屏不再因为多开终止。到此多窗口播放实现。
• 如果说通过新标签打开视频代替连放，那么视频点播页获取到播放源后应该直接播放，这个播放器实例调整下参数应该可行，找了对应视频sdk的文档，果然有自动播放的配置。
• ok，在列表页连续开了几个页面后，视频在新标签页都自动播放了，而且不会弹出“多窗口操作”提示。
• 本以为在上一步已经完成。可是在观察学习记录时候，发现多开的视频中只有一个在正常记录（就是最后一个）。
• 这回原本思路断了。想到既然能变更播放器实例参数，是不是可以按倍速播放，这样即使单个视频播放也是可以节省时间的。
• 将播放器倍速调成了多倍速，从32慢慢试着降到了2倍速，倍速播放是可以。但是学习记录还是按单倍记录。盲猜这个是按照后端接口来记录的，前端如何变动都是按照时间差来记录。
• 重点转向后台接口的研究，整个点播页，接口也就那么几个，理一下：
  • 一个获取视频数据
  • 一个获取点播数据
  • 一个定时记录学习时间（尝试调用，时间过短或过长都记录不上；多开窗口，该接口状态码直接是非200）
  • 播放器内部track接口（不清楚干嘛用的）
• 如果是自己开发会怎么去实现这个功能，本身是一个后端开发，思路很快带入。该网站接口设计还是挺严谨的，这里调整不做详细分析。
• 按照接口功能结合之前的js调整。多开之后也能正常记录学习时间。

代码使用

• 修改代码有了，怎么去使用呢？
• 浏览器控制台吗？这个多开的效率大大降低了，每次打开后都要自己去控制台操作。
• 浏览的本地文件替换？虽然说是一个点播页，但是替换路径每个视频的都不同，还是不够效率。
• 设置本地代理呢？尝试将该html的资源请求通过代理转向修改后的内容。成了。

可交付产品

• 通过上方法刷完，发现还有好多同事在水深火热。决定把这个方案小范围分享。但是操作步骤也只有开发同事能理解，没有那么多时间去手把手教小白。而且与自己的初衷相悖，本来就是为了省时间。
• 那么如果让他们，连上本电脑的网络呢？思路上可行，但是连上后发现两个问题：
  • 资源加载不到，上述调整出来的功能根本就没有；
  • 估计每个ip有网络限速，其他电脑连进来后，本机电脑打开其他网页很卡（还要干活呢，这个交付方案绝对不可行）。
• 之前想到浏览器文件替换，如果批处理生成所有缓存文件呢？
  • 还是需要在控制台点击源文件才能生效；
  • 多个部门视频清单不同；
  • 小白还是小白！
• 不知道是怎么就想到浏览器插件，稍作调研发现应该可行。
  • 插件安装简单，部分浏览器不受限制；
  • content-scripts可以向目标文件添加html、js、css。js？注入执行脚本?

教程参考

插件教程参考

• 不多余阐述浏览器插件了。直接说思路，就是利用content-scripts来表更目标文件，在文件后追加一个可执行脚本。
• 执行脚本内容，原播放器dom清除，用新的替换，不然可能会出现有两个播放器实例（重影）。
• 新播放器实例初始化和原来的一样，变更部分就是我们要更改部分。

最后打包后安装插件使用，正常和预期一样。

至此整个自驱开发完成。