提示(必读)

雨课堂最近进行了更新，所以本篇文章已经无法使用！

所以会在最近更新最新版本的思路！

目标功能

  1. 对于图文页可以自动判断是否满足已读要求并进行跳转
  2. 对于视频页自动播放该页视频 ，调节成二倍速 ，并在播放完的时候进行自动跳转
  3. 对于其他的页面的自动学习暂不考虑

基本思路

  1. 首先判断当前页面是否未读，如果已读则直接进入下一页
  2. 然后判断当前的页面类型
  3. 如果是视频页则判断播放器是否被打开，视频是否正在播放，视频播放是否结束
  4. 对于没打开播放器的则直接打开播放器，调节倍速开始播放
  5. 对于播放结束的则关闭播放器进入下一个页面
  6. 对于习题页面则直接下一页，跳过不做处理

网页分析

  • 每一页PPT由class为swiper-slide的<div>标签组成，并且其中有几个特殊的页面会用特殊的class标签标记，分别是：
    • swiper-slide swiper-slide-prev 标记当前选中的课件的上一页
    • swiper-slide swiper-slide-active 标记当前选中的课件
    • swiper-slide swiper-slide-next 标记当前选中课件的下一页
  • 同样的左侧大纲也都是由一个个class为swiper-no-swiping swiper-slide的<div>标签组成，特殊页面的标记情况与上面类似就不重复了。
    • 而在大纲<div>标签的内部则会有一个<span>标签来显示当前页面是否已读，因此可以利用这个标签来判断该页是否已读。而这个标签的class属性会有两种状态分别为：
      • flag 标记该页已读
      • flag noRead 标记该页未读
  • 然后再回到每一页PPT里面进行详细的探究：
    • 首先是视频框，对于课件里面有视频的会有一个class为video-box box-center的<div>标签用于打开视频的页面
      • 点开视频框播放以后,我们会有一个class为audioCmp的<div>标签来播放视频，以及视频的各种设置也在里面
      • 我们能够通过class标签为xt_video_player_progress_currentTime的<xt-progress>来判断当前视频的一个播放进度。达到100%则视频就播放完成了
      • 其中我们还能发现视频页面的播放暂停按钮的class标签为xt_video_player_play_btn fl
      • 对于视频播放倍速等设置则被放在了class为xt_video_player_setbox或者xt_video_player_common_list的标签里面(具体得以实际为准)
      • 关闭视频播放器的按钮的class标签为icon close
    • 对于习题页面会有一个class为label submit的<span>表示，用于提交的按钮。
    • 页码则会有一个class为page的标签来表示，从而我们可以获取到我们所需要的下一页是哪个。

JS代码构建

手机类型页面代码(需要点击控制台左上角切换设备仿真)

setInterval(function(){//每3秒执行一次
    var page = document.getElementsByClassName('swiper-slide swiper-slide-active')[1];//获取当前选中的PPT
    if(document.getElementsByClassName('swiper-slide swiper-slide-active')[0].getElementsByClassName('flag noRead').length != 0){//判断当前PPT是否已读
        if(page.getElementsByClassName('video-box box-center').length != 0){//判断当前是否为视频页
            if(document.getElementsByClassName('audioCmp').length==0){//判断视频有没有被打开
                page.getElementsByClassName('video-box box-center')[0].click();//打开视频
                var event = new Event('touchend');
                setTimeout(function() {
                document.getElementsByClassName('xt_video_player_setbtn')[0].dispatchEvent(event);//点开倍速播放设置
                }, 200);
                setTimeout(function() {
                document.getElementsByClassName('xt_video_player_setbox')[0].getElementsByTagName("li")[0].dispatchEvent(event);//设置2倍速
                }, 400);
                setTimeout(function() {
                document.getElementsByClassName('xt_video_player_play_btn')[0].dispatchEvent(event);//开始播放
                }, 600);
            }else if(document.getElementsByClassName('xt_video_player_progress_currentTime')[0].style.width == '100%'){//判断视频是否播放完毕
                var event = new Event('touchend');
                document.getElementsByClassName('icon close')[0].dispatchEvent(event);//关闭播放器
                var page = Number(document.getElementsByClassName('container thumb-swiper-slide-active')[0].getElementsByClassName('page')[0].innerText);
                document.getElementsByClassName('swiper-no-swiping')[page].click();//切换下一个ppt
            }   
        }else if(page.getElementsByClassName('label submit').length!=0){//如果页面中有习题，则直接下一页
                var page = Number(document.getElementsByClassName('container thumb-swiper-slide-active')[0].getElementsByClassName('page')[0].innerText);
                document.getElementsByClassName('swiper-no-swiping')[page].click();//切换下一个ppt
        }
    }else{
        var page = Number(document.getElementsByClassName('container thumb-swiper-slide-active')[0].getElementsByClassName('page')[0].innerText);
        document.getElementsByClassName('swiper-no-swiping')[page].click();//切换下一个ppt
    }
},3000);

使用方式

  1. 使用浏览器打开雨课堂的网页并打开对应的课件
  2. 在课件的第一页按下F12打开开发者工具(F12开不开的请自行查找你浏览器的对应的打开方式)
  3. 在开发者工具中找到控制台这个功能，然后在控制台中输入上方的JS代码即可自动学习
  4. 对于课件中的习题请自行回答，程序会自动跳过该页！

*注：对于视频页面会自动调节成2倍速，但是只支持部分浏览器如(Edge)，如果视频打开后视频右下角调节倍速的按钮是齿轮状的，则会自动调节，否则会报错从而导致原视频会以一倍速播放。如果需要可以通过调节浏览器窗口大小等方式来使其显示从而正常使用(后期会更新解决这个问题)。如果还有什么其他问题也可以评论询问。

浮生若梦，为欢几何？