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 ...
最新文章
- 微信小程序 点击卡片切换 动画效果
- maven多模块eclipse jetty热部署
- ICLR要搞深度生成模型大讨论,Max Welling和AAAI百万美元大奖得主都来了,Bengio是组织者之一...
- 李沐等将目标检测绝对精度提升 5%,不牺牲推理速度
- 用 chown 和 chmod 修改目录所属用户及权限
- windwon安装macaca环境
- python 多文件知识
- 【CodeForces - 245H 】Queries for Number of Palindromes (带容斥的区间dp)
- 京东云擎提供了免费的wordpress一键安装功能了
- 信息学奥赛C++语言: 将字符串中的小写字母转换成大写字母
- 缺失数据em算法python_EM算法
- 9. Linux 磁盘与文件管理系统(inode 目录)
- Swarm基于多主机容器网络-overlay networks 梳理
- java代码绩点计算器_怎么用java写一个gpa计算器?
- 上亿用户,如何高效统计独立用户访问量?
- 2019-11-12
- Android事件分发之源码分析,kotlin库
- 机器人系统常用仿真软件介绍效果与评价指标
- linux内核如何读写ddr,linux内核解压详解.doc
- 齐鲁工业大学c语言复试真题,2016年齐鲁工业大学理学院C语言程序设计复试笔试仿真模拟题...
热门文章
- mongodb数据库导出表的流程
- 利用EQSecure E盾预防流氓软体
- SaaSpace:11个免费建筑信息建模软件工具
- Markdown基本语法介绍及cmd markdown下载
- linux 下kali linux 中使用hydra 进行对虚拟机中win10系统的密码破解
- 傲腾内存简介 AEP 简介
- Xcode打包ipa的步骤
- 基于JDK1.8的JVM 内存结构【JVM篇三】
- win10本机计算机策略,Win10怎么打开本地安全策略_Win10本地安全策略在哪?-192路由网...
- java中POJO类为什么要实现序列化