使用TamperMonkey实现慕课网自动播放下一集

引言

最近快实习了，计划把之前学习的一些东西再复习总结下。在慕课网回顾一个MySQL的教学视频时遇到个问题，视频每集都很短，再加上我是2倍速观看，每过一会就得点一下下一集，比较麻烦。就想写个自动播放下一集的脚本，过程中稍微遇到点问题，在这里记录下。MySQL教程的地址为http://www.imooc.com/learn/122。

环境

浏览器： FireFox 58.0.4 64位
脚本工具：TamperMonkey4.6.5709 简称TM

基本思路

1. 
   
2. 定位video标签，和下一节按钮标签，这个标签实质上为一个div标签
3. 对video标签的ended属性添加事件监听
   

可以看到基本的思路还是很简单的，但在实现第2步时，发现无法正确添加事件监听，具体在后面讲到

具体实现

第一步：定位标签

这一步很简单了，按下面的步骤做就好

1. 打开对应的网址
2. 按F12打开FireFox的开发者工具
3. 点击左上角如下图所示的红色圈部分
4. 将鼠标移动到视频区域，单击

可以看到页面下方打开的开发者工具已经自动定位到了video标签，如上图黄色圈部分。
可喜可贺的是这个video标签设置了id，可以通过jQuery利用id对它进行定位。

实际的定位video标签的语句为

// 返回一个类似列表的玩意，可以使用索引来获得对应位置的标签，索引从0开始。
$("#video-box-mocoplayer-hls-video_html5_api")[0]

同理，可以得到定位div标签的语句为

$(".J-next-btn")[0]

第二步：添加事件监听

添加事件监听，只需要调用现成的js函数addEventListener(event, function)即可。实际的语句为

// ended属性在播放完前值为false，播放完后为true
$("#video-box-mocoplayer-hls-video_html5_api")[0].addEventListener("ended", function() {$(".J-next-btn")[0].click()});

测试

把整个代码放到开发者工具的控制台执行，由下图可以看到，第二步中给出的代码确实是正确地添加了事件监听的。

移植到TamperMonkey

单击浏览器右上角的黑色TamperMonkey图标，点击添加新脚本...，进入脚本编辑界面。下图是我编辑好之后的界面。

整体内容如下：

// ==UserScript==
// @name         Mooc自动下一集
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://www.imooc.com/video/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    $("#video-box-mocoplayer-hls-video_html5_api")[0].addEventListener("ended", function() {$(".J-next-btn").click();});
})();

几点说明

1. @name 指定脚本的名称
2. @description 指定脚本的描述信息
3. @match 指定脚本所匹配的网址，可以使用通配符*来进行全部匹配
4. 其余项直接默认好了，代码默认是在页面加载完之后运行

测试

保存脚本，刷新教程页面，可以发现浏览器右上角的TamperMonkey图标上显示了一个数字1，点击图标，由下图可以说明刚刚新建的脚本已经加载了。

但是从实际上，视频播放完后并不会自动播放下一节。开发者工具也显示video标签并未添加我们自定义的事件监听。如下图所示

分析问题成因

同样的代码，在控制台直接输入没有问题，通过TM插入运行就出现了问题。说明代码没有问题，有问题的应该是插入代码的运行时间。也许是插入的代码运行的太早了，运行的时候，video标签还不存在，所以导致添加事件监听失败。

测试

同样的代码，再在控制台输入运行下。不过这次是在页面加载基本完成，而视频还未刷新出来的时候运行。结果如下

可以看到除了视频未加载，其余页面已经加载完成。此时的video标签是找不到的。

解决问题

找到原因之后，解决起来就很方便了。直接让添加事件监听的代码段延迟一段时间后再执行就可以了。这就要用到setTimeout(function,millsecond)函数了。这个函数用于让指定函数fuction延迟millsecond之后执行。这里选择延迟2秒执行就可以了。最终的代码如下：

// ==UserScript==
// @name         Mooc自动下一集
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://www.imooc.com/video/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    setTimeout(function() {$("#video-box-mocoplayer-hls-video_html5_api")[0].addEventListener("ended", function() {$(".J-next-btn").click();});}, 2000);
})();

大功告成，最后测试一下，一切正常。世界和谐。