【脚本】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 });

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/58193.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

pycharm导出环境安装包列表

pycharm导出环境安装包列表

pycharm导出环境安装包列表 一、导出安装包列表二、安装requirements.txt三、列表显示已安装的包四、显示特定包的信息 一、导出安装包列表 pip freeze > requirements.txt二、安装requirements.txt pip install -r requirements.txt三、列表显示已安装的包 pip list四、…
阅读更多...
Qt学习笔记第31到40讲

Qt学习笔记第31到40讲

第31讲 多态 基本概念 多态&#xff08;Polymorphism&#xff09;是面向对象编程&#xff08;OOP&#xff09;的一个重要特性。在 C 中&#xff0c;多态是指用同一个函数名或操作符在不同的上下文中可以表现出不同的行为。简单来说&#xff0c;多态允许不同的对象对同一消息&a…
阅读更多...
力扣刷题（sql）--零散知识点（2）

力扣刷题（sql）--零散知识点（2）

1.自定义分组后的分类统计问题&#xff08;某组内无数据却仍要展示&#xff09; 例题1&#xff1a; 查询每个工资类别的银行账户数量。 工资类别如下&#xff1a; "Low Salary"&#xff1a;所有工资 严格低于 20000 美元。"Average Salary"&#xff1a;…
阅读更多...
源码复现detectron2时遇到的错误

源码复现detectron2时遇到的错误

说明&#xff1a;安装detectron2直接进到官网 detectron2源码 中找安装文档&#xff0c;安装安装文档一般没什么问题&#xff0c;但是我确实出现了问题&#xff0c;包括有&#xff1a; gcc版本太低&#xff1a;提示说需要gcc 9及以上的版本才可以pytorch版本不匹配&#xff1a…
阅读更多...
【机器学习基础】激活函数

【机器学习基础】激活函数

激活函数 1. Sigmoid函数2. Tanh&#xff08;双曲正切&#xff09;函数3. ReLU函数4. Leaky ReLU函数 1. Sigmoid函数 观察导数图像在我们深度学习里面&#xff0c;导数是为了求参数W和B&#xff0c;W和B是在我们模型model确定之后&#xff0c;找出一组最优的W和B&#xff0c;使…
阅读更多...
ipad-make-sense：首个支持 iPad 的开源数据标注工具

ipad-make-sense：首个支持 iPad 的开源数据标注工具

在机器学习和人工智能快速发展的今天&#xff0c;高质量的数据标注工具变得越来越重要。然而&#xff0c;大多数现有的数据标注工具都局限于传统的桌面环境&#xff0c;无法适应现代移动办公的需求。今天&#xff0c;我要向大家介绍一个突破性的解决方案 —— ipad-make-sense&…
阅读更多...
阳振坤：云时代数据库的思考 | OceanBase发布会实录

阳振坤：云时代数据库的思考 | OceanBase发布会实录

在2024 OceanBase 年度发布会中&#xff0c;OceanBase 的创始人与首席科学家阳振坤进行了《云时代数据库的思考》的主题分享。本文为演讲实录。 亲爱的朋友们&#xff0c;衷心感谢各位莅临今天的发布会现场。今天是一个云的时代&#xff0c;我想与大家分享&#xff0c;我对于云…
阅读更多...
51单片机完全学习——DS18B20温度传感器

51单片机完全学习——DS18B20温度传感器

一、DS18B20数据手册解读 首先我们知道DS18B20使用的是单总线传输&#xff0c;默认情况下读出来的温度是12位的&#xff0c;我们这里只讨论外部电源供电这种情况。 有这张图片我们知道&#xff0c;12位温度的最小分辨率是10^-4次方&#xff0c;因此就是0.0625.我们只需要将最后…
阅读更多...
leetcode hot100【LeetCode 94. 二叉树的中序遍历】java实现

leetcode hot100【LeetCode 94. 二叉树的中序遍历】java实现

LeetCode 94. 二叉树的中序遍历 题目描述 给定一个二叉树&#xff0c;返回它的中序遍历。 示例 1&#xff1a; 输入&#xff1a;root [1,null,2,3] 输出&#xff1a;[1,3,2]示例 2&#xff1a; 输入&#xff1a;root [] 输出&#xff1a;[]示例 3&#xff1a; 输入&…
阅读更多...
Docker快速安装Grafana

Docker快速安装Grafana

#创建数据目录 sudo mkdir -p /app/grafana/config sudo mkdir -p /app/grafana/data sudo chmod -R 777 /app/grafana/config sudo chmod -R 777 /app/grafana/data #配置文件grafana.ini ##################### Grafana Configuration Example ##################### # # E…
阅读更多...
STM32应用详解（12）使用I2C的main函数例程

STM32应用详解（12）使用I2C的main函数例程

文章目录 前言一、支持I2C总线的常见器件二、程序详解1.main函数2.读取传感器温度值的函数3.相关宏定义 前言 学习I2C总线。本文件主要分析main函数和LM75A驱动程序。了解器件驱动基本原理。 一、支持I2C总线的常见器件 (1)支持I2C总线的器件有很多&#xff0c;在开发板上支持…
阅读更多...
redis详细教程（3.ZSet，Bitmap，HyperLogLog）

redis详细教程（3.ZSet，Bitmap，HyperLogLog）

ZSet Redis 的 ZSet&#xff08;有序集合&#xff09;是一种特殊的数据类型&#xff0c;它允许存储一系列不重复的字符串元素&#xff0c;并为每个元素关联一个分数&#xff08;score&#xff09;。这个分数用于对集合中的元素进行排序。ZSet 的特点是&#xff1a; 唯一性&am…
阅读更多...
Openlayers高级交互（11/20）：显示带箭头的线段轨迹，箭头居中

Openlayers高级交互（11/20）：显示带箭头的线段轨迹，箭头居中

本示例介绍如何在vue+openlayers项目中设置带有箭头的线段，箭头位于线段的中间位置。这里用到 forEachSegment 函数， 这个函数接受一个特征和一个回调函数作为参数。它遍历特征中的每个子线段，并调用回调函数传入子线段的中点坐标。 效果图 专栏名称内容介绍Openlayers基础…
阅读更多...
代码布局风格指南

代码布局风格指南

代码布局风格指南 本内容面向于新手&#xff0c;内容也比较笼统&#xff0c;看文章阅读量&#xff0c;如果阅读和点赞量较高&#xff0c;就会开一个专栏来进行详细的说明。 在编写C语言代码时&#xff0c;良好的代码风格不仅能够提高代码的可读性&#xff0c;还能方便团队协作…
阅读更多...
Springboot整合spring-boot-starter-data-elasticsearch

Springboot整合spring-boot-starter-data-elasticsearch

前言 <font style"color:rgb(36, 41, 47);">spring-boot-starter-data-elasticsearch</font> 是 Spring Boot 提供的一个起始依赖&#xff0c;旨在简化与 Elasticsearch 交互的开发过程。它集成了 Spring Data Elasticsearch&#xff0c;提供了一套完整…
阅读更多...
51c自动驾驶~合集2

51c自动驾驶~合集2

我自己的原文哦~ https://blog.51cto.com/whaosoft/11491137 #BEVWorld BEV潜在空间构建多模态世界模型&#xff0c;全面理解自动驾驶~一、引言 世界模型建模了有关环境的知识&#xff0c;其可以通过给定的条件对未来进行合理的想象。未来想象要求世界模型具有物理规律的理解…
阅读更多...
秦时明月2搭建笔记

秦时明月2搭建笔记

1.具体配置 数据库不修改&#xff0c;如果修改了&#xff0c;gm那边也要 2.数据库 3.上传配置文件出现问题 参考&#xff1a;对于测试时&#xff0c;错误信息 Caused by: com.mysql.jdbc.PacketTooBigException: Packet for query is too large-CSDN博客 4.启动tomcat&#x…
阅读更多...
“冷”在日语里有这些表达-柯桥商务日语培训成人零基础学习

“冷”在日语里有这些表达-柯桥商务日语培训成人零基础学习

“冷”在日语里有这些表达: 寒い 这是最常用的表达,与中文的“冷”意思相同。 例句: 部屋が寒いから、エアコンをつけます。(房间冷,我去开空调。) 冷たい 形容物体表面温度较低,有“冷的”的意思。 例句: この水は冷たいですね。(这水挺冷的。) にぶい 指饮料不够冰镇…
阅读更多...
安全芯片 OPTIGA TRUST M 使用介绍与示例（基于STM32裸机）

安全芯片 OPTIGA TRUST M 使用介绍与示例（基于STM32裸机）

文章目录 目的资料索引硬件电路软件框架介绍数据存储框架移植框架使用 使用示例示例地址与硬件连接通讯测试功能测试 总结 目的 OPTIGA TRUST M 是英飞凌推出的安全芯片&#xff0c;芯片通提供了很多 slot &#xff0c;用于存放各类安全证书、密钥、用户数据等&#xff0c;内置…
阅读更多...
Python： Print Table on console

Python： Print Table on console

# encoding: utf-8 # 版权所有 2024 ©涂聚文有限公司 # 许可信息查看&#xff1a; # 描述&#xff1a; # Author : geovindu,Geovin Du 涂聚文. # IDE : PyCharm 2023.1 python 3.11 # OS : windows 10 # Datetime : 2024/10/28 22:08 # User : geo…
阅读更多...
最新文章

Copyright @ 2022~2023