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

引言

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

环境

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

基本思路


  1. 定位video标签,和下一节按钮标签,这个标签实质上为一个div标签
  2. 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图标,点击添加新脚本...,进入脚本编辑界面。下图是我编辑好之后的界面。

TM编辑界面
整体内容如下:

// ==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);
})();

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

  • 15
    点赞
  • 73
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值