前言

事情是这样的，公司有一个在线培训学习平台，里面有各种部门的直播，技术分享等视频，文档等，公司一项考核指标是要求每人每月，在线学习平台都需要有效学时8小时，如果不够会影响年终绩效

现在经济形势不好，公司收益影响挺大，开发人员都是一个当成好几个用，不仅要加班干活儿，还得抽时间在线学习，视频大部分都被切成了几分钟左右那种小节的形式(为了防止视频打开后去干别的了)，所以就是视频打开后，一会儿切过来看下，如果播放完了就点击下一个（视频还不能快进，如果触发了快进，需要重新播放才能满足 有效学时 ），或者再找个未学习的视频播放，直到满足每个月 有效学时 8小时指标，好烦呀...

能用脚本之类的让它自动播放吗？

思路梳理，代码实现

既然是是前端工程师，那么我们能不能用前端的方式解决一些实际问题，来看下实际遇到的场景，一步步分析解决

1. 一个视频，被分为了几个章节，视频播放完以后会有一个弹框提示 已完成本章节，是否继续下一章节，点确认按钮后才会自动播放下一个章节视频

   

   

   需要脚本的地方来了，实现弹框里面的 确定 按钮自动点击。首先需要找到 确定 按钮的元素，使用原生 js 获取按钮元素，然后添加 click 事件

   

   找到确定按钮后，发现没有使用id属性，使用 document.querySelectorAll('.dialog-footer-confirmed') 获取元素，在浏览器的 Console 输出找到对应的当前弹框中的 确认 按钮，可以发现是第7个，元素找到了，给 div 添加 click 触发事件，完成点击, 这样会自动切换到下一个章节视频

   document.querySelectorAll(".dialog-footer-confirmed")[6].click();
   

2. 这时候如果是最后一个章节视频了，会提示 课程已学完，赏个好评吧，如果是提交，需要给课程评分，并且输入评论，如果点击 稍后再说 则关闭弹框。这时候如果需要继续看视频，就需要关闭浏览器 tab 页，去课程列表里面找视频了

   

   关闭好评弹框，这里只处理 稍后再说 按钮点击，同样的道理，找到对应的 dom 元素，添加 click 触发事件

   let closeBtnList = document.querySelectorAll('.close-btn');
   closeBtnList.forEach(item => {
       if (item.innerText === '稍后再说') {
           item.click();
       }
   });
   

3. 如果章节视频不是最后一个，第1步执行结束后会自动切换到视频，并且弹框 恢复播放，点 是 继续播放视频，点 否 只是关闭弹框。这时候就出现了一个情况，因为视频加载需要时间，不知道什么时候会出现弹框，因此，这里选择加一个定时器, 同时把其他 dom 元素的检测都放到定时器中执行，由于用到了定时器，这时候对于 dom 元素获取就需要全部加上 if 判断了，判断元素是否为显示状态或者存在

   setInterval(() => {
       // 其他逻辑
       
       // 是否恢复播放
       if (document.querySelectorAll('.course-btn-yes')[0]) {
           // 是 - 按钮点击
           document.querySelectorAll('.course-btn-yes')[0].click();
       }
   }, 1000 * 5);
   

4. 由于平台做了很多防止自动刷视频，刷有效学时的策略，使用脚本后台浏览器后台自动执行，自动播放下一个视频会出现有效学时无效的情况，如果切换浏览器tab页，或者浏览器后台运行，平台会检测到用户已经切换到别的地方，这时候 有效学时 的 倒计时 会停止，这时候视频在播放，但是已经无法获得有效学时了

   

   这时候需要在定时器添加对 倒计时 的判断，如果倒计时停止了, 视频也停止了，则需要设置视频从头开始重新播放视频，这里对 倒计时 区域的元素进行了判断，并根据 倒计时 的输出内容分析视频状态，并且需要对视频播放器进行操作，视频播放器使用的 vedio 标签

   // 获取视频元素
   let vedio = document.querySelectorAll("#player_html5_api")[0];
   // 获取倒计时输出区内容，进行内容判断，用来分析视频状态
   let ele1 = document.querySelectorAll(".course-view-tips .dis-flex")[0];
   if (ele1 && ele1.innerText) {
     const t = ele1.innerText;
     if (t.indexOf("还需0秒完成") > -1) {
       return false;
     }
     if (text1 === t) {
       // 倒计时停止了，需要重新播放视频
       text1 = "";
       vedio.currentTime = 0;
       vedio.play();
     } else {
       text1 = t;
     }
   } else {
     // 视频处于暂停状态，或视频播放倒计时结束状态
     text1 = "";
     let closeBtnList = document.querySelectorAll(".close-btn");
     closeBtnList.forEach((item) => {
       if (item.innerText === "稍后再说") {
         item.click();
       }
     });
   }
   

   这时候脚本基本实现了视频播放完以后自动切换下一个播放了，并且对平台的防刷检测机制做了一定的处理

5. 目前的脚本还都是浏览器的 Console 中执行，如果每次打开培训平台，再手动复制一下对应的代码，再放到浏览器 Console 中执行岂不是很麻烦，想到一个办法，就是把脚本放到油猴插件中。

   到目前为止，打开对应的站点脚本自动执行，打开视频后，脚本能自动点击弹框，自动切换下一个视频。

   但是，在实际使用中发现，在自动播放视频会时不时出现视频播放完了，但是 有效学时 的时间没有增长的情况，由于时间，精力，水平有限，目前这问题还无法使用脚本完全解决。

   基于实际场景的测试，发现只要是浏览器 tab 当前页一直是视频播放页，有效学时 的时间就正常，因此，想到了一个解决方案，如果脚本运行的浏览器在虚拟机中运行怎么样？ 这样也不影响个人日常工作，系统直接后台运行，js 最多检测一下浏览器的某些行为，然后虚拟机 Ubuntu22 中 Firefox 浏览器测试，有效学时时间不增长问题解决了

   

油猴脚本地址

github.com/gywgithub/F…

扩展思考

1. 第一次使用脚本去解决工作任务之外的实际问题，虽然还有脚本大量不足之处，如当前视频的章节都播放完以后自动切换到下一个未学习的视频，如果学习资料为PDF文档，自动滚动到最下面，再自动切换下一个资料等等问题未解决，但脚本编写研究的过程是非常兴奋的

2. 关于站点是如何检测用户离开的，目前这部分还没时间去验证，如果是纯js实现的，可能用到了document.hidden 属性和visibilitychange 事件，如果不是纯js，还用到了什么吗？

3. 类似于这种自动化实现某些功能页面点击的，也能用自动化测试工具，或者其他语言脚本实现

关于当前需求的解决方案, 也可能还有其他的解决方案，欢迎大家评论区讨论交流，一起学习共同进步 ^-^