【脚本】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,一经查实,立即删除!

相关文章

源码复现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 的开源数据标注工具

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

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

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

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

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

STM32应用详解(12)使用I2C的main函数例程

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

redis详细教程(3.ZSet,Bitmap,HyperLogLog)

ZSet Redis 的 ZSet&#xff08;有序集合&#xff09;是一种特殊的数据类型&#xff0c;它允许存储一系列不重复的字符串元素&#xff0c;并为每个元素关联一个分数&#xff08;score&#xff09;。这个分数用于对集合中的元素进行排序。ZSet 的特点是&#xff1a; 唯一性&am…

Openlayers高级交互(11/20):显示带箭头的线段轨迹,箭头居中

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

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

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

秦时明月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 是英飞凌推出的安全芯片&#xff0c;芯片通提供了很多 slot &#xff0c;用于存放各类安全证书、密钥、用户数据等&#xff0c;内置…

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…

Midjourney中文版:激发无限创意的艺术之旅

在数字化时代&#xff0c;艺术创作已不再受限于传统工具与技巧的束缚。Midjourney中文版&#xff0c;作为一款专为国内用户打造的智能艺术平台&#xff0c;正以超凡的智能算法和丰富的功能&#xff0c;引领每一位创作者踏上一场前所未有的艺术之旅。 Midjourney AI超强绘画 (原…

OpenHarmony鸿蒙应用开发 | 如何使用vsCode配置cangjie(仓颉)插件编程

前沿 余承东余总&#xff08;余大嘴&#xff09;在2024年10月21日鸿蒙【原生鸿蒙之夜暨华为全场景新品发布会】现场说&#xff0c;cangjie会成为鸿蒙下一代的编程语言&#xff0c;为开发者提供更强大的编程能力&#xff0c;让开发者在鸿蒙设备上实现更多创意。目前cangjie正处…

海亮科技亮相第84届中国教装展 尽显生于校园 长于校园教育基因

10月25日&#xff0c;第84届中国教育装备展示会&#xff08;以下简称“教装展”&#xff09;在昆明滇池国际会展中心开幕。作为国内教育装备领域规模最大、影响最广的专业展会&#xff0c;本届教装展以“数字赋能教育&#xff0c;创新引领未来”为主题&#xff0c;为教育领域新…

相识redis

一、Redis简介 什么是redis&#xff1f; Redis&#xff08;全称为Remote Dictionary Server&#xff09;是一个开源的非关系性数据库用于存储键值对&#xff0c;主要用于数据存储、缓存和消息队列方面&#xff0c;相传redis的初心是做消息队列起家但有心栽花花不开&#xff0…

WPF+MVVM案例实战(一)- 设备状态LED灯变化实现

文章目录 1、项目创建2、UI界面布局1. MainWindow.xaml2、颜色转换器实现2.MainViewModel.cs 代码实现 3、运行效果4.源代码下载 1、项目创建 打开 VS2022 &#xff0c;新建项目 Wpf_Examples&#xff0c;创建各层级文件夹&#xff0c;安装 CommunityToolkit.Mvvm 和 Microsof…

react18中react-thunk实现公共数据仓库的异步操作

redux及react-redux都只能实现数据的同步修改更新&#xff0c;有点类似于vue中的mutation&#xff0c;只能做同步操作&#xff0c;异步的话不用actions来实现。由于在项目始终不可避免要实现的异步数据的更新&#xff0c;这明显不够用了。是时候引入我们的异步中间件redux-thun…