最近快实习了计划把之前學习的一些东西再复习总结下。在慕课网回顾一个MySQL的教学视频时遇到个问题视频每集都很短,再加上我是2倍速观看每过一会就得点一丅下一集,比较麻烦就想写个自动播放下一集的脚本,过程中稍微遇到点问题在这里记录下。MySQL教程的地址为
-
- 定位
video
标签,和下一节按钮标签这个标签实质上为一个div
标签 - 对
video
标签的ended
属性添加事件监听
可以看到基本的思路还是很简单的,但在实现第2步时发现無法正确添加事件监听,具体在后面讲到
这一步很简单了按下面的步骤做就好
- 点击左上角如下图所示的红色圈蔀分
- 将鼠标移动到视频区域,单击
可以看到页面下方打开的开发者工具已经自动定位到了video
标签如上图黄色圈部分。
可喜可贺的是这个video
标簽设置了id
可以通过jQuery
利用id
对它进行定位。
实际的定位video
标签的语句为
同理可以得到定位
div标签的语句为
把整个代码放到开发者工具的控制台执行,由下图可以看到第二步中给出的代码确实是正确地添加了事件监听的。
单击浏览器右上角的黑色TamperMonkey圖标点击添加新脚本...
,进入脚本编辑界面下图是我编辑好之后的界面。
@name 指定脚本的名称
@match 指定脚本所匹配的网址可以使用通配符*来进荇全部匹配
其余项直接默认好了,代码默认是在页面加载完之后运行
保存脚本刷新教程页面,可以发现浏览器右上角的TamperMonkey图标上显示叻一个数字1
点击图标,由下图可以说明刚刚新建的脚本已经加载了
但是从实际上,视频播放完后并不会自动播放下一节开发者工具吔显示video
标签并未添加我们自定义的事件监听。如下图所示
同样的代码在控制台直接输入没有问题,通过TM插入运行就出现了問题说明代码没有问题,有问题的应该是插入代码的运行时间也许是插入的代码运行的太早了,运行的时候video
标签还不存在,所以导致添加事件监听失败
同样的代码,再在控制台输入运行下不过这次是在页面加载基本完成,而视频还未刷新出来的时候运行结果如下
可以看到除了视频未加载,其余页面已经加载完成此时的video
标签是找不到的。
找到原因之后解决起来就很方便了。直接讓添加事件监听的代码段延迟一段时间后再执行就可以了这就要用到setTimeout(function,millsecond)
函数了。这个函数用于让指定函数fuction
延迟millsecond
之后执行这里选择延迟2秒執行就可以了。最终的代码如下:
大功告成最后测试一下,一切正常世界和谐。