使⽤TamperMonkey 实现慕课⽹⾃动播放下⼀集
引⾔
环境
基本思路
1.
2. 定位video 标签，和下⼀节按钮标签，这个标签实质上为⼀个div 标签
3. 对video 标签的ended 属性添加事件监听
可以看到基本的思路还是很简单的，但在实现第2步时，发现⽆法正确添加事件监听，具体在后⾯讲到
具体实现
第⼀步：定位标签
这⼀步很简单了，按下⾯的步骤做就好
1. 打开对应的
2. 按F12打开FireFox 的开发者⼯具
3. 点击左上⾓如下图所⽰的红⾊圈部分
4.
将⿏标移动到视频区域，单击
浏览器： FireFox 58.0.4 64位
脚本⼯具：TamperMonkey4.6.5709 简称TM
可以看到页⾯下⽅打开的开发者⼯具已经⾃动定位到了video标签，如上图黄⾊圈部分。
可喜可贺的是这个video标签设置了id，可以通过jQuery利⽤id对它进⾏定位。
实际的定位video标签的语句为
tampermonkey
// 返回⼀个类似列表的玩意，可以使⽤索引来获得对应位置的标签，索引从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    tampermonkey/
// @version      0.1
// @description  try to take over the world!
// @author      You
// @match        www.imooc/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    tampermonkey/
// @version      0.1
// @description  try to take over the world!
// @author      You
// @match        www.imooc/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})();

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。