Mrli
别装作很努力,
因为结局不会陪你演戏。
Contacts:
QQ博客园

党员在线培训课程~免除暂停烦恼

2021/11/25
Word count: 2,061 | Reading time: 10min

党员在线培训课程~免除暂停烦恼

女朋友反馈：刷党员在线培训课程得一直手动的解决暂停问题，无法单纯的挂机刷视频。作为一个程序猿，当然是帮她解决啦~

首先分析页面中JS执行逻辑，如下所示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
vpn_eval((function(){

    $(".video_lists").animate({scrollTop: $(".video_red1").offset().top - 162}, 1000);

    var loop_flag = "";
    var timer = "";
    var flag = false;
    var video = document.getElementById("video");

    // 续播定时器
    function current_time() {
        timer = setInterval(function () {
            $.ajax({
                type: "POST",
                cache: false,
                dataType: "json",
                url: "/ybdy/lesson/current_time",
                data: {
                    rid: "18612",
                    time: video.currentTime,
                    _xsrf: $(":input[name='_xsrf']").val()
                },
                success: function (data) {
                    if (Number(data.code) == 0) {
                        player.pause();
                        var msg = "系统监测到您有异常学习行为，本视频观看无效，请您重新进行该视频内容学习。"
                        public_alert(1, ["我知道了"], '<i class="iconfont">&#xe633;</i><p>' + msg + '</p><p></p>', 'public_cont1', function () {
                            window.location.reload()
                        });
                    }
                }
            });
        }, 30000);
    }

    var hlsSupported = Hls.isSupported();
    if (hlsSupported) {
        try {
            var isP2PSupported = p2pml.core.HybridLoader.isSupported();
        } catch (err) {
            window.location.href = "/static/browser_error.html?v=b57810c40053fbcd20af772b6b6c48b62499dd0ba8bf87bf775a937ad28d427fd99b65bec35bef2368fd1d5dcdbc7c8ed4478c72bbb8d4e35d58eab0fd40fab7";
        }

        var engine = isP2PSupported ? new p2pml.hlsjs.Engine() : undefined;

        var player = new Plyr(video, {
            captions: {
                active: true,
                update: true
            },
            controls: ['play-large', 'play', 'current-time', 'mute', 'volume', 'fullscreen'],
            seekTime: 0
        });

        var hls = new Hls({
            liveSyncDurationCount: 7, // To have at least 7 segments in queue
            loader: isP2PSupported ? engine.createLoaderClass() : Hls.DefaultConfig.loader
        });

        if (isP2PSupported) {
            p2pml.hlsjs.initHlsJsPlayer(hls);
        }

        // var videoSrc = 'http://video.dangqipiaopiao.com/m3u8/3cd74e54455e95c04db1e7dc0be2e95b/3cd74e54455e95c04db1e7dc0be2e95b.m3u8';
        var videoSrc = '/m3u8/b451260fbb0f72b2e643308e6a6ac95c/b451260fbb0f72b2e643308e6a6ac95c.m3u8';
        hls.loadSource(videoSrc);
        hls.attachMedia(video);

        layui.use("layer", function () {
            var layer = layui.layer;

            layer.load(2, {shade: [0.5, 'grey']});

            player.on('loadedmetadata', function (event) {
                layer.closeAll('loading');

                if ("" != "") {
                    var r_time = parseInt();

                    hour = 0, minute = 0, second = 0; //时间默认值
                    hour = Math.floor(r_time / 60 / 60) < 10 ? '0' + Math.floor(r_time / 60 / 60) : Math.floor(r_time / 60 / 60);
                    minute = Math.floor(r_time / 60 % 60) < 10 ? '0' + Math.floor(r_time / 60 % 60) : Math.floor(r_time / 60 % 60);
                    second = Math.floor(r_time % 60) < 10 ? '0' + Math.floor(r_time % 60) : Math.floor(r_time % 60);
                    last_time = hour + ":" + minute + ":" + second;

                    public_alert(2, ["从头开始", "继续观看"], '<p class="i_player">同学你好！该课程视频你上次观看到：' + last_time + '<br/><br/></p><p></p><p></p>', 'public_cont1', function () {
                        $(".public_close").click(); //此为关闭方法
                        player.play();
                    }, function () {
                        $(".public_close").click(); //此为关闭方法

                        player.forward(parseInt());
                        player.play();
                    });
                } else {
                    public_alert(1, ["我知道了"], '<i class="iconfont">&#xe633;</i><p>您需要完整观看一遍课程视频，才能获取本课学时，看到视频播放完毕提示框即为完成，然后视频可以拖动播放。</p><p></p>', 'public_cont1', function () {
                        $(".public_close").click(); //此为关闭方法
                        player.play();
                    });
                }
            });
        });
    } else {
        window.location.href = "/static/browser_error.html?v=b57810c40053fbcd20af772b6b6c48b62499dd0ba8bf87bf775a937ad28d427fd99b65bec35bef2368fd1d5dcdbc7c8ed4478c72bbb8d4e35d58eab0fd40fab7";
    }

    player.on('ended', function (event) {
        clearInterval(timer);   //定时器清除；

        $.ajax({
            type: "POST",
            cache: false,
            dataType: "json",
            url: "/ybdy/lesson/resource_record",
            data: {
                rid: "815724",
                resource_id: "18612",
                video_id: "6782",
                lesson_id: "587",
                _xsrf: $(":input[name='_xsrf']").val()
            },
            success: function (data) {
                window.clearInterval(loop_flag);
                window.clearInterval(flag);

                if (Number(data.code) == 1) {
                    public_alert(1, ["我知道了"], '<i class="iconfont">&#xe633;</i><p>当前视频播放完毕！</p><p></p>', 'public_cont1', function () {
                        window.location.reload()
                    });
                    $(".public_cont").css("left", "40%");
                    $('.plyr__controls').show();
                } else if (Number(data.code) == -1) {
                    var msg = "系统监测到您有异常学习行为，本视频观看无效，请您重新进行该视频内容学习。"
                    public_alert(1, ["我知道了"], '<i class="iconfont">&#xe633;</i><p>' + msg + '</p><p></p>', 'public_cont1', function () {
                        window.location.reload()
                    });
                }
            }
        });
    });

    // 监听播放事件
    player.on('play', function (event) {
        current_time();
        // studyTime();
        loop_flag = setTimeout("loop_pause()", 300000);
    });

    // 监听暂停事件
    player.on('pause', function (event) {
        window.clearTimeout(flag);
        clearInterval(timer);   //定时器清除；
    });

    // 监听倍速播放，并重置为正常倍速
    player.on('ratechange', function (event) {
        if (player.media.playbackRate != 1) {
            player.media.playbackRate = 1;
        }
    });

    document.oncontextmenu = new Function("return false;");
    document.onkeydown = document.onkeyup = document.onkeypress = function (event) {
        var e = event || window.event || arguments.callee.caller.arguments[0];
        if (e && e.keyCode == 123) {
            e.returnValue = false;
            return (false);
        }
    }

    // 定期暂停方法
    function loop_pause() {
        player.pause();

        public_alert(1, ["继续"], '<i class="iconfont">&#xe633;</i><p>视频已暂停，点击按钮后继续学习！</p><p></p>', 'public_cont1', function () {
            $(".public_close").click(); //此为关闭方法
            player.play();
        });
    };

    document.addEventListener('visibilitychange', function () { //浏览器切换事件
        if (document.visibilityState == 'hidden') {
            player.pause()
        } else {
            player.on('loadedmetadata', function (event) {
                player.play()
            })
        }
    });


}
).toString().slice(12, -2),"");

Ways1： 手动模拟

暂停修改

可以看到导致不断暂停的原因是下面一段代码：

监听播放事件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
player.on('play', function (event) {
    current_time();
    // studyTime();
    loop_flag = setTimeout("loop_pause()", 300000);
});

// 定期暂停方法
function loop_pause() {
    player.pause();

    public_alert(1, ["继续"], '<i class="iconfont">&#xe633;</i><p>视频已暂停，点击按钮后继续学习！</p><p></p>', 'public_cont1', function () {
        $(".public_close").click(); //此为关闭方法
        player.play();
    });
};

即，点击播放器的播放后会启动一个300s执行的定时器，弹出窗口并暂停播放。为此我们可以通过clearTimeout(loop_flag)清除这个定时器

之后就不会弹出暂停啦。

倍速修改

可以从JS代码中看到还监听了播放器player的ratechange倍速事件，我们可以通过F12打开开发者工具移除这个Listener

1
2
3
4
5
6
// 监听倍速播放，并重置为正常倍速
player.on('ratechange', function (event) {
    if (player.media.playbackRate != 1) {
        player.media.playbackRate = 1;
    }
});

倍速插件推荐：Video speed Controller

注： 经过测试，直接通过Video speed Controller调整倍速似乎不会被限制

▲有意思的是，因为定时暂停的间隔是300s，因此如果16倍倍速播放后基本都可以在300内完成，这样就不需要删除暂停了

页面切换修改

可以从JS代码中看到还监听了浏览器的visibilitychange切换事件，我们可以通过F12打开开发者工具移除这个Listener

1
2
3
4
5
6
7
8
9
document.addEventListener('visibilitychange', function () { //浏览器切换事件
    if (document.visibilityState == 'hidden') {
        player.pause()
    } else {
        player.on('loadedmetadata', function (event) {
            player.play()
        })
    }
});

播放进度修改

处理完您需要完整观看一遍课程视频，才能获取本课学时，看到视频播放完毕提示框即为完成，然后视频可以拖动播放。弹窗后，点击视频暂停、再播放，然后键盘输入9，将视频播放进度推到90%，然后再倍速放完。

▲.综上： 个人采取的是[倍速播放]+[页面切换]+[播放进度拖拉]的方案

TODO

Way2：通过模拟网络请求，直接过教程

可以看到每个视频结束后其实调用的是ended事件执行的函数，会发送一个POST请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
player.on('ended', function (event) {
    clearInterval(timer);   //定时器清除；

    $.ajax({
        type: "POST",
        cache: false,
        dataType: "json",
        url: "/ybdy/lesson/resource_record",
        data: {
            rid: "815724",				 // different field
            resource_id: "18612",		  // different field
            video_id: "6782",			 // different field
            lesson_id: "587",			 // different field
            _xsrf: $(":input[name='_xsrf']").val()	// different field
        },
        success: function (data) {
            window.clearInterval(loop_flag);
            window.clearInterval(flag);

            if (Number(data.code) == 1) {
                public_alert(1, ["我知道了"], '<i class="iconfont">&#xe633;</i><p>当前视频播放完毕！</p><p></p>', 'public_cont1', function () {
                    window.location.reload()
                });
                $(".public_cont").css("left", "40%");
                $('.plyr__controls').show();
            } else if (Number(data.code) == -1) {
                var msg = "系统监测到您有异常学习行为，本视频观看无效，请您重新进行该视频内容学习。"
                public_alert(1, ["我知道了"], '<i class="iconfont">&#xe633;</i><p>' + msg + '</p><p></p>', 'public_cont1', function () {
                    window.location.reload()
                });
            }
        }
    });
});

请求并不复杂， 只不过因为女朋友自己已经看完挺多了，因此就不花费时间去弄这个了。感兴趣的小伙伴可以继续完成。

提供思路：

  1. 获取“我的课程”https://webvpn1.jiangnan.edu.cn/http/xxx/user/lesson`中所有课程内容List， (v_id不同)

  2. 再进入每一个课程学习，找到该课程学习下的子课程SubList， (r_id不同)

  3. 进入每个子课程，爬取具体页面https://webvpn1.jiangnan.edu.cn/http/77726476706e69737468656265737421f4e6518c693a6151700f87ad961b2631b52fa041/ybdy/play?v_id=7007&r_id=19757&r=video&pg=#的页面内容，找到以下数据==>end_data

    1
    2
    3
    4
    5
    6
    7
    data: {
        rid: "815724",				 // different field
        resource_id: "18612",		  // different field
        video_id: "6782",			 // different field
        lesson_id: "587",			 // different field
        _xsrf: $(":input[name='_xsrf']").val()	// different field
    },

  4. 通过requests发送POST模拟请求，发送end_data数据

附

开发者工具修改Listener

修改

针对指定的Listener点击相应事件右边的Remove按钮即可

注： 开发者工具最好不要关闭，等过完所有视频再关

Author: Mrli

Link: https://nymrli.top/2021/11/25/党员在线培训课程-免除暂停烦恼/

Copyright: All articles in this blog are licensed under CC BY-NC-SA 3.0 unless stating additionally.

< PreviousPost
前端-跨域NextPost >
Linux iptables学习
CATALOG
  1. 1. 党员在线培训课程~免除暂停烦恼
    1. 1.1. Ways1： 手动模拟
      1. 1.1.1. 暂停修改
      2. 1.1.2. 倍速修改
      3. 1.1.3. 页面切换修改
      4. 1.1.4. 播放进度修改
  2. 2. TODO
    1. 2.1. Way2：通过模拟网络请求，直接过教程
  3. 3. 附
    1. 3.1. 开发者工具修改Listener