赞
踩
最近快实习了,计划把之前学习的一些东西再复习总结下。在慕课网回顾一个MySQL的教学视频时遇到个问题,视频每集都很短,再加上我是2倍速观看,每过一会就得点一下下一集,比较麻烦。就想写个自动播放下一集的脚本,过程中稍微遇到点问题,在这里记录下。MySQL教程的地址为http://www.imooc.com/learn/122。
浏览器: FireFox 58.0.4 64位
脚本工具:TamperMonkey4.6.5709 简称TM
video
标签,和下一节按钮标签,这个标签实质上为一个div
标签video
标签的ended
属性添加事件监听 可以看到基本的思路还是很简单的,但在实现第2步时,发现无法正确添加事件监听,具体在后面讲到
这一步很简单了,按下面的步骤做就好
F12
打开FireFox
的开发者工具可以看到页面下方打开的开发者工具已经自动定位到了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图标,点击添加新脚本...
,进入脚本编辑界面。下图是我编辑好之后的界面。
整体内容如下:
// ==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();});
})();
几点说明
- @name 指定脚本的名称
- @description 指定脚本的描述信息
- @match 指定脚本所匹配的网址,可以使用通配符*来进行全部匹配
- 其余项直接默认好了,代码默认是在页面加载完之后运行
保存脚本,刷新教程页面,可以发现浏览器右上角的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);
})();
大功告成,最后测试一下,一切正常。世界和谐。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。