当前位置: 首页 > news >正文

【脚本】B站视频AB复读

在这里插入图片描述

控制台输入如下代码,回车

	const video = document.getElementsByTagName("video")[0];//获取bpx-player-control-bottom-center容器,更改其布局方式const div = document.getElementsByClassName("bpx-player-control-bottom-center")[0];div.style.display = "flex";div.style.gap = "10px";// 创建的A按钮const divA = document.createElement("div");divA.textContent = "A点";divA.style.fontSize = "14px";divA.style.cursor = "pointer";divA.style.fontWeight = "600";divA.style.width = "30px";divA.classList.add("bpx-player-ctrl-btn");// 创建的B按钮const divB = document.createElement("div");divB.textContent = "B点";divB.style.fontSize = "14px";divB.style.cursor = "pointer";divB.style.fontWeight = "600";divB.style.width = "30px";divB.classList.add("bpx-player-ctrl-btn");// 创建的清除循环按钮const divClear = document.createElement("div");divClear.textContent = "清除循环";divClear.style.fontSize = "14px";divClear.style.cursor = "pointer";divClear.style.fontWeight = "600";divClear.style.width = "60px";divClear.classList.add("bpx-player-ctrl-btn");//创建标记Aconst markA = document.createElement("div");markA.style.position = "absolute";markA.style.left = "0px"; //此处设置位置markA.style.top = "0px";markA.style.display = "none";markA.textContent = "🔻";//创建标记Aconst markB = document.createElement("div");markB.style.position = "absolute";markB.style.left = "0px"; //此处设置位置markB.style.top = "0px";markB.style.display = "none";markB.textContent = "🔻";let pointA = null;let pointB = null;let loopInterval = null;//添加三个控制按钮window.onload = function () {div.append(divA);div.append(divB);div.append(divClear);};function addMarkA() {const markContainer = document.getElementsByClassName("bpx-player-progress-area")[0];markContainer.append(markA);const width = markContainer.clientWidth; //获取进度的宽度const duration = video.duration; //获取总时长markA.style.left = (width / duration) * pointA - 10 + "px";markA.style.display = "block";}function addMarkB() {const markContainer = document.getElementsByClassName("bpx-player-progress-area")[0];markContainer.append(markB);const width = markContainer.clientWidth; //获取进度的宽度const duration = video.duration; //获取总时长markB.style.left = (width / duration) * pointB - 10 + "px";markB.style.display = "block";}divA.addEventListener("click", () => {pointA = video.currentTime;addMarkA();});divB.addEventListener("click", () => {pointB = video.currentTime;addMarkB();start();});function start() {if (pointA !== null && pointB !== null && pointA < pointB) {clearInterval(loopInterval);loopInterval = setInterval(() => {if (video.currentTime >= pointB) {video.currentTime = pointA;}}, 100);console.log("循环开始", pointA, "to", pointB);} else {console.log("请设置循环点");}}divClear.addEventListener("click", () => {clearInterval(loopInterval);pointA = null;pointB = null;markA.style.display = "none";markB.style.display = "none";});video.addEventListener("ended", () => {clearInterval(loopInterval);});// 在选集中切换视频时,清除循环const observer = new MutationObserver(mutations => {mutations.forEach(mutation => {if (mutation.type === 'attributes' && mutation.attributeName === 'src') {if(video.src===''){console.log('视频源为空');}else{console.log('视频源已更改:', video.src);divClear.click()}}});});// 配置观察选项observer.observe(video, { attributes: true });

相关文章:

【脚本】B站视频AB复读

控制台输入如下代码&#xff0c;回车 const video document.getElementsByTagName("video")[0];//获取bpx-player-control-bottom-center容器,更改其布局方式const div document.getElementsByClassName("bpx-player-control-bottom-center")[0];div.sty…...

leetcode - 257. 二叉树的所有路径

257. 二叉树的所有路径 题目 解决 做法一&#xff1a;深度优先搜索 回溯 深度优先搜索&#xff08;Depth-First Search, DFS&#xff09;是一种用于遍历或搜索树或图的算法。这种搜索方式会尽可能深地探索每个分支&#xff0c;直到无法继续深入为止&#xff0c;然后回溯到上…...

python 相关

python 1. pip 安装某个版本范围的软件 pip install “elasticsearch>6,<7” pip install elasticsearchX.Y.Z 2. pip 查看包版本 pip show pandas 3. pip 下载whl包 https://tendcode.com/subject/article/pip-offline-download/ (更多平台与架构)pip downl…...

静态分析2:控制流分析(构建CFG)

参考&#xff1a;南京大学《软件分析》课程2 1、控制流分析 控制流分析实际上指的是构建控制流图&#xff08;Control Flow Graph&#xff0c;CFG&#xff09;CFG是静态分析的基础数据结构CFG的节点可以是单个指令、基本块&#xff08;Basic Block&#xff0c;BB&#xff09;…...

Linux 应用领域

目录 服务器领域 桌面环境 软件开发 数据分析与科学计算 嵌入式系统 虚拟化和云计算 人工智能与机器学习 物联网&#xff08;IoT&#xff09; 网络安全 服务器领域 Linux在服务器领域的应用是其最为广泛和成熟的领域之一。由于其开源、稳定、高效和安全的特性&#xf…...

FPM383C指纹模块超详解 附驱动

0. 本人使用环境介绍 0.1 硬件环境 ESP32-C3FPM383C指纹模块一根破旧的usb数据线 0.2 软件环境 Clion2024.2.2ESP-IDF5.3.1Clion插件ESP-IDF 1. 硬件接口说明 1.1 UART UART 缺省波特率为 57.6Kbps&#xff0c;数据格式&#xff1a;8 位数据位&#xff0c;2 位停止位&am…...

若依框架篇-若依集成 X-File-Storage 框架(实现图片上传阿里云 OSS 服务器)、EasyExcel 框架(实现 Excel 数据批量导入功能)

&#x1f525;博客主页&#xff1a; 【小扳_-CSDN博客】 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 文章目录 1.0 实现使用 Excel 文件批量导入 1.1 导入功能的前端具体实现 1.2 导入功能的后端具体实现 1.3 使用 EasyExcel 框架实现 Excel 读、写功能 1.4 将 Easy Excel 集成到…...

.rmallox勒索病毒肆虐:如何有效防范与应对

引言 在当今这个数字化时代&#xff0c;网络安全已成为一个不可忽视的重要议题。随着信息技术的飞速发展&#xff0c;网络空间的安全威胁也日益复杂多变。病毒、木马、勒索软件等恶意程序层出不穷&#xff0c;比如.rmallox勒索病毒。它们利用先进的技术手段&#xff0c;如代码…...

人工智能能否影响未来生活:一场深刻的社会与技术变革

随着人工智能技术的不断发展&#xff0c;我们已经目睹了它在各行各业掀起的巨大变革浪潮。从医疗行业的病例诊断、药物研发&#xff0c;到企业运营的数据分析、智能决策&#xff0c;再到日常生活中的智能语音助手、自动驾驶汽车、智能家居&#xff0c;人工智能正以前所未有的速…...

cmu 15-445学习笔记-3 存储引擎

03 Database Storage-Part Ⅰ 数据库存储上半部分 数据库分层划分结构图&#xff1a; Disk Manager&#xff1a;存储引擎&#xff0c;管理磁盘上的文件Bufferpool Manager&#xff1a;管理内存的缓存池Access Methods&#xff1a;访问方法Operator Execution&#xff1a;执行…...

[linux]和windows间传输命令scp 执行WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!错误解决

[linux]和windows间传输命令scp 执行WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!错误解决. 现象&#xff1a; 原因&#xff1a; 接收方服务器系统做了某些更改&#xff0c;导致登录时会报错。主要因为接收方服务器对登录过它的主机都会把该主机登录标识证书记录下来&a…...

C++ | Leetcode C++题解之第518题零钱兑换II

题目&#xff1a; 题解&#xff1a; class Solution { public:int change(int amount, vector<int>& coins) {vector<int> dp(amount 1), valid(amount 1);dp[0] 1;valid[0] 1;for (int& coin : coins) {for (int i coin; i < amount; i) {valid[…...

高并发-负载均衡

负载均衡在微服务架构中是一个重要的组成部分&#xff0c;旨在优化资源利用、提高服务可用性和确保系统的高可扩展性。以下是对微服务中的负载均衡的详细介绍&#xff0c;包括其原理、类型、实现方式以及相关的技术。 一、负载均衡的原理 负载均衡的基本原理是将进入系统的请…...

Docker 常用命令全解析:提升对雷池社区版的使用经验

Docker 常用命令解析 Docker 是一个开源的容器化平台&#xff0c;允许开发者将应用及其依赖打包到一个可移植的容器中。以下是一些常用的 Docker 命令及其解析&#xff0c;帮助您更好地使用 Docker。 1. Docker 基础命令 查看 Docker 版本 docker --version查看 Docker 运行…...

基于 Postman 和 Elasticsearch 测试乐观锁的操作流程

鱼说&#xff0c;你看不到我眼中的泪&#xff0c;因为我在水中。水说&#xff0c;我能感觉到你的泪&#xff0c;因为你在我心中。 -村上春树 在分布式系统中&#xff0c;多个并发操作对同一资源的修改可能导致数据不一致。为了解决这种问题&#xff0c;Elasticsearch 提供了乐观…...

如何从PPT中导出600dpi的高清图

Step1. 修改PPT注册表 具体过程&#xff0c;参见如下链接&#xff1a;修改ppt注册表&#xff0c;导出高分辨率图片 Step2. 打开PPT&#xff0c;找到自己想要保存的图&#xff0c;选中图像&#xff0c;查看图像尺寸并记录 Step3. 重新新建一个PPT&#xff0c;并根据记录的图片…...

day01-ElasticStack+Kibana

ElasticStack-数据库 #官网https://www.elastic.co/cn/ #下载7.17版环境准备 主机名IP系统版本VMware版本elk110.0.0.91Ubuntu 22.04.417.5.1elk210.0.0.92Ubuntu 22.04.417.5.1elk310.0.0.93Ubuntu 22.04.417.5.1 单机部署ES 1.下载ES软件包&#xff0c;放到/usr/local下 […...

HTML 约束验证

HTML5引入了表单相关的一些新机制&#xff1a;它为<input>元素和约束验证增加了一些新的语义类型&#xff0c;使得客户端检查表单内容变得容易。基本上&#xff0c;通过设置一些新的属性&#xff0c;常用的约束条件可以无需 JavaScript 代码而检测到&#xff1b;对于更复…...

vue3项目开发一些必备的内容,该安装安装,该创建创建

重新整理了一下项目开发必备的一些操作&#xff0c;以后直接复制黏贴运行&#xff0c;随着项目开发&#xff0c;后期会陆续补充常用插件或组件等 如果你是还没有安装过的新人&#xff0c;建议从《通过安装Element UI/Plus来学习vue之如何创建项目、搭建vue脚手架、npm下载、封装…...

2D拓扑图

2D拓扑图主要指的是在二维平面上表示物体形状和关系的一种图形表示方法。 一、基本概念 2D网格拓扑结构&#xff1a;在二维平面上&#xff0c;由一系列的节点&#xff08;node&#xff09;和边&#xff08;edge&#xff09;组成。每个节点代表一个具体的位置或坐标点&#xf…...

大数据面试题整理——Hive

系列文章目录 大数据面试题专栏点击进入 文章目录 系列文章目录Hive 面试知识点全面解析一、函数相关&#xff08;一&#xff09;函数分类与特点&#xff08;二&#xff09;concat和concat_ws的区别 二、SQL 的书写和执行顺序&#xff08;一&#xff09;书写顺序&#xff08;二…...

Python实现图像(边缘)锐化:梯度锐化、Roberts 算子、Laplace算子、Sobel算子的详细方法

目录 Python实现图像&#xff08;边缘&#xff09;锐化&#xff1a;梯度锐化、Roberts算子、Laplace算子、Sobel算子的详细方法引言一、图像锐化的基本原理1.1 什么是图像锐化&#xff1f;1.2 边缘检测的基本概念 二、常用的图像锐化算法2.1 梯度锐化2.1.1 实现步骤 2.2 Robert…...

【电机控制】相电流重构——单电阻采样方案

【电机控制】相电流重构——单电阻采样方案 文章目录 [TOC](文章目录) 前言一、基于单电阻采样电流重构技术原理分析1.1 单电阻采样原理图1.2 基本电压矢量与电流采样关系 二、非观测区2.1 扇区过渡区2.2 低压调制区 三、非观测区补偿——移相法四、参考文献总结 前言 使用工具…...

#基础算法

1 差分练习 1 模板题 代码实现&#xff1a; import java.util.Scanner;public class Main {public static void main(String[] args) {Scanner sc new Scanner(System.in);int n sc.nextInt();int m sc.nextInt();int num sc.nextInt();long[][] arr new long[n 2][m …...

如何用猿大师办公助手实现OA系统中Word公文/合同在线编辑及流转?

在OA系统或者合同管理系统中&#xff0c;我们会经常遇到网页在线编辑Word文档形式的公文及合同的情况&#xff0c;并且需要上级对下级的公文进行批注等操作&#xff0c;或者不同部门的人需要签字审核&#xff0c;这就需要用到文档流转功能&#xff0c;如何用猿大师办公助手实现…...

Python中的列表是什么?它们有什么用途?

1、Python中的列表是什么&#xff1f;它们有什么用途&#xff1f; 在Python中&#xff0c;列表是一种有序的集合&#xff0c;可以包含不同类型的元素。列表可以存储一组值&#xff0c;并且可以方便地访问、修改和操作这些值。 列表的主要用途包括&#xff1a; 数据存储&…...

探索现代软件开发中的持续集成与持续交付(CI/CD)实践

探索现代软件开发中的持续集成与持续交付&#xff08;CI/CD&#xff09;实践 随着软件开发的飞速进步&#xff0c;现代开发团队已经从传统的开发模式向更加自动化和灵活的开发流程转变。持续集成&#xff08;CI&#xff09; 与 持续交付&#xff08;CD&#xff09; 成为当下主…...

React 前端框架开发入门案例

以下是一个使用 React 进行前端框架开发的入门案例&#xff0c;实现一个简单的待办事项列表应用。 一、准备工作 安装 Node.js&#xff1a;React 需要 Node.js 环境来运行。你可以从 Node.js 官方网站下载并安装适合你操作系统的版本。 创建项目目录&#xff1a;在你的电脑上…...

模拟 DDoS 攻击与防御实验

模拟 DDoS 攻击与防御实验可以帮助理解攻击原理和防御策略。在进行这种实验时&#xff0c;必须确保在受控、合法的环境中进行&#xff0c;避免对真实网络造成损害。以下是具体步骤&#xff1a; 环境要求 硬件&#xff1a;至少两台计算机&#xff08;或虚拟机&#xff09;&…...

【electron8】electron实现“图片”的另存为

注&#xff1a;该列出的代码&#xff0c;都在文章内示例出 1. 另存为按钮事件&#xff1a; const saveAsHandler async () > {const { path, sessionId } recordInfoif(typeof message ! string) return;// 因为我的图片是加密的&#xff0c;所以我需要根据接口返回的路…...

sae+wordpress/手机端搜索引擎排名

数据结构与算法 二分查找 一、简述 记--二分查找的C语言简单实现。 例子打包&#xff1a;外链:https://wwi.lanzouq.com/b0ca7a38b 密码:ckk5 二、二分查找 释义 假设有一个有序表A&#xff0c;元素个数为n&#xff0c;要查找元素为K 1&#xff09;将A表分成左右两个子表A…...

利用博客做网站/能打开任何网站浏览器

下面由thinkphp教程栏目给大家介绍比较ThinkPHP5和无框架代码在高并发下的效率&#xff0c;希望对需要的朋友有所帮助&#xff01;测试的业务逻辑&#xff1a;测试一个抽奖功能&#xff0c;使用MySQL数据库的乐观锁机制防止超发。关键代码&#xff1a;$prizeArr array(array(l…...

知乎网站内容建设的逻辑/奶茶的营销推广软文

Yield Guild Games&#xff08;YGG&#xff09;正在通过启动公会进阶项目&#xff0c;以游戏化的分配方式将 YGG 通证发放给社区 &#xff0c;这其实是一个由成就驱动的社区通证分配协议。通过这个协议&#xff0c;YGG 将能够奖励那些对 YGG 社区、项目和运营做出有意义贡献的公…...

wordpress页面加载时间/链接地址

使用VC编译C或者C程序&#xff0c;都需要相关的C runtime库才能运行。如果你是VC6&#xff0c;相应的库就叫MSVCR&#xff0c;如果是VC2005&#xff0c;那就是MSVCR08&#xff0c;VC2008就是MSVCR09。我这 里假设你安装的是VC2005&#xff0c;请进入如下目录&#xff1a;{VS In…...

批量入侵wordpress/拉新app渠道

背景 最近一直在做公司的应用软件服务架构的升级工作&#xff0c;里面涉及使用mod_proxy替换先前的mod_ajp&#xff0c;因为我们要用jetty7。 同时万恶的jetty 7对ajp协议支持不是很好&#xff0c; 具体可见我的另一篇博文&#xff1a; 纠结的mod_jk与jetty的组合。 在线下测…...

爱站网关键词密度查询/汽车行业网站建设

分享一个类的加载初始化代码demo&#xff0c;这段代码考察类中内容的加载顺序&#xff0c;很有意思 一起钻研走一下 public class InitializeDemo {private static int k 1;private static InitializeDemo t1 new InitializeDemo("t1");private static Initializ…...