JavaScript自动切换并播放视频 | Tampermonkey
JavaScript自动切换并播放视频 | Tampermonkey
背景:接上篇文章。昨天的脚本已经实现了自动在视频播放过程中点击突然出现的按钮使之继续播放,但是这还存在很多问题。
- 每次视频播放完需要自己切换到下一个视频
- 每次视频都需要手动在控制台中输入代码
如何获取需要播放的视频?
观察源代码。
<li class=""><a style="width:70%;color:red"href="/fzdx/play?v_id=1119&r_id=4103&r=video&pg=">一、历史渊源和现实基础</a><span>00:27:33</span>
</li>
<li class="video_red1"><a style="width:70%;"href="/fzdx/play?v_id=1119&r_id=4104&r=video&pg=">二、显著特点和要求(一)</a><span>00:39:44</span>
</li>
<li class=""><a style="width:70%;"href="/fzdx/play?v_id=1119&r_id=4105&r=video&pg=">三、显著特点和要求(二)</a><span>00:16:58</span>
</li>
<li class=""><a style="width:70%;"href="/fzdx/play?v_id=1119&r_id=4106&r=video&pg=">四、思想根基和比较优势</a><span>00:23:51</span>
</li>
可以看到,每个视频的url都被存在了a标签中,我们点击a标签就可以跳转到对应的视频页面。
值得注意的是,已经看完了的视频的a标签会被设置为红色,如下图。
我们仔细观察源代码也可以发现,第一个视频的a标签有着的color:red的样式。所以我们的目标a标签就是那些样式中color为空的a。
还有一个小细节,该页面上还有一些a标签,它们对应的不是视频列表中的视频。比如
<a href="#" class="video_bottom_tlq">课程讨论区</a><a href="javascript:void(0);" class="note_save">保存</a>
我们发现这些a标签和视频列表中的a有一个明显区别,这些a标签都有class名。所以我们可以根据这一点来进行区分。
根据以上信息我们可以写出以下代码。
var target_a; //找到第一个还没有看的视频【a不是红色的】var as = document.getElementsByTagName("a");for (i = 0; i < as.length; i++){if (as[i].className == "" && as[i].style.color == ""){target_a = as[i];break;}}
得到的target_a就是视频列表中还没看的视频里的第一个视频。
什么时候对target_a进行点击呢?
我们已经得到了target_a。但是还需要思考什么时候进行点击。
当前的视频还在播放,我们就直接点击下一个,这样肯定不行,所以我们利用<video>的标签的进度条是否已经到最后来判断视频是否播放完。如果播放完,那就点击target_a。如果没有播放完,就执行点击确定框的代码(视频会时不时冒出一个框让你点击,并自动暂停,点击后才能继续播放。这段代码在我昨天的文章中已经写出)。
代码如下。
var video = document.getElementById("video"); if (video.currentTime == video.duration && target_a) //如果视频已经播放完,并且有剩余视频,则点击下一个视频进行观看{target_a.click();}else if (video.currentTime < video.duration) //在视频没有播放完的情况下若弹出框,进行点击。{var btn = document.querySelector('.public_submit'); if(btn)btn.click();}
遇到的问题1:每个视频开头点击确定开始后报错
NotAllowedError: The play method is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.
原因是浏览器为了限制恶意自动播放视频的js脚本,对脚本进行了限制。解决办法是先将视频静音,之后就能利用js自动播放了。
改进代码如下
var video = document.getElementById("video"); if (video.currentTime == video.duration && target_a) //如果视频已经播放完,并且有剩余视频,则点击下一个视频进行观看{target_a.click();}else if (video.currentTime < video.duration) //在视频没有播放完的情况下若弹出框,进行点击。{if (video.paused){video.muted = true; //设置为静音video.play(1); //播放}var btn = document.querySelector('.public_submit'); if(btn)btn.click();}
遇到问题2:每次切换视频即切换页面后控制台的代码被重置
因为每次点击视频链接后,相当于打开了一个新的网页,这时候控制台的代码就无了。查询过后发现油猴脚本[Tampermonkey]可以实现在页面加载后自动执行用户自定义的js脚本。
成功实现自动切换视频并播放的操作。
最终代码
setInterval(function(){var target_a; //找到第一个还没有看的视频【a不是红色的】var as = document.getElementsByTagName("a");for (i = 0; i < as.length; i++){if (as[i].className == "" && as[i].style.color == ""){target_a = as[i];break;}}var video = document.getElementById("video"); if (video.currentTime == video.duration && target_a) //如果视频已经播放完,并且有剩余视频,则点击下一个视频进行观看{target_a.click();}else if (video.currentTime < video.duration) //在视频没有播放完的情况下若弹出框,进行点击。{if (video.paused){video.muted = true;video.play(1);}var btn = document.querySelector('.public_submit'); if(btn)btn.click();}
}, 1000)
参考链接
https://blog.csdn.net/qq_41376740/article/details/80789835
JavaScript自动切换并播放视频 | Tampermonkey相关推荐
- 抖音助手,帮您自动切换下一个视频
我发现了一个抖音自动下一个播放视频的辅助软件,很方便,不用自己手动滑动到下一个视频去播放.而且遇到长视频也会自动等待视频播放完毕再切换下一个.确实方便啊. 尤其是开车手机放到那,不用看,想听听抖音的歌 ...
- Android横竖屏切换继续播放视频
只需要重新onSaveInstanceState方法,在其里面记住我们要记录的参数 package com.bawei.day07_videoview;import android.os.Bundle ...
- 手机抖音设置自动切换下一个视频
1.软件安装 链接:https://pan.baidu.com/s/1Z6UciLvLX4LswHRvr3BLhw 提取码:jcw4 2.新建或导入脚本文件 滑动脚本代码: "auto& ...
- vue中使用TcPlayer,自动播放视频,以及下一个视频
前提是已经知道如何使用腾讯的TcPlayer. 腾讯云点播 超级播放器开发:https://cloud.tencent.com/document/product/266/14603 一.自动播放视频. ...
- android webview全屏时自动切换横屏,安卓 webview播放视频及横屏
问题描述: 在项目中,会有在webview嵌入的网页中播放视频的需求,本来以为Android的WebView应该是默认支持视频播放的,不会有太大的问题,但是经过测试后,发现两个大问题: 有些手机无法正 ...
- 使用Swiper插件实现视频轮播,怎么实现切换自动播放视频?
一.需求分析 这两天讨论了一个项目需求,刚开始是希望:轮播图中嵌入视频,轮播到视频自动播放,播放完毕切换下一张轮播,手动切换时暂停播放视频.后面因为自动播放没有声音,便暂时放弃了这个想法(有知道或了解 ...
- javascript如何实现类似西瓜视频的视频队列自动播放?
关注并将「趣谈前端」设为星标 每天定时分享技术干货/优秀开源/技术思维 前言 去年利用空余时间研究了一下javascript的Interp Observer API,发现其有很大的应用场景,比如图片或 ...
- 根据uview的swiper增加自动播放视频,视频播放完毕切换下一个
//父级调用 <u-swiper:list="list4":current="currents"keyName="url":autop ...
- html制作自动切换音乐按钮代码,HTML5+JavaScript+CSS实现音乐播放器——难点二:自己设计一个控制音乐播放的控制器...
我们都知道HTML5给我们提供了"controls"这个插件,可是这个插件却比较丑,还不能实现上一首下一首的播放,以及进度条的手动改变等功能,那么如何自己设计一个控制音乐播放的控制 ...
- 如何阻止YouTube在iOS,Android和Web上自动播放视频
Over at YouTube, they love it when you watch more YouTube. If you're sick of YouTube automatically q ...
最新文章
- 作为大数据和云计算学习的一个序吧
- 为Ubuntu设置新的软件源
- Spring boot的Web开发
- Oracle_忘记密码
- 5类6类7类网线对比_超6类网线和7类网线有何区别?有何用途?家用电脑,看这!...
- 线段树模板--单点更新+区间求和
- kbmmw 的HTTPSmartService中的跨域访问
- assert.notDeepEqual()
- java开源内容发布系统_18个Java开源CMS系统一览
- #蓝桥杯嵌入式#电路模电基础知识
- 用拉格朗日插值法,牛顿插值和分段线性插值计算近似值
- QThread: Destroyed while thread is still running 解决方法
- proccessing 中的 port busy
- linux运行img文件格式,img是什么格式?img文件怎么打开?
- 手把手教你做游戏外挂
- 微软在文件夹里插广告,把用户恶心到了,官方:试验功能,不小心推送了!...
- c语言中大写字母A转小写,C语言 | 大写字母A转换为小写a
- 模拟电子技术之学前必备知识点
- 【渝粤教育】电大中专常见病药物治疗_1作业 题库
- 《无人机通信与导航技术》札记