当前位置: 首页 > 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 });
http://www.lryc.cn/news/471341.html

相关文章:

  • leetcode - 257. 二叉树的所有路径
  • python 相关
  • 静态分析2:控制流分析(构建CFG)
  • Linux 应用领域
  • FPM383C指纹模块超详解 附驱动
  • 若依框架篇-若依集成 X-File-Storage 框架(实现图片上传阿里云 OSS 服务器)、EasyExcel 框架(实现 Excel 数据批量导入功能)
  • .rmallox勒索病毒肆虐:如何有效防范与应对
  • 人工智能能否影响未来生活:一场深刻的社会与技术变革
  • cmu 15-445学习笔记-3 存储引擎
  • [linux]和windows间传输命令scp 执行WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!错误解决
  • C++ | Leetcode C++题解之第518题零钱兑换II
  • 高并发-负载均衡
  • Docker 常用命令全解析:提升对雷池社区版的使用经验
  • 基于 Postman 和 Elasticsearch 测试乐观锁的操作流程
  • 如何从PPT中导出600dpi的高清图
  • day01-ElasticStack+Kibana
  • HTML 约束验证
  • vue3项目开发一些必备的内容,该安装安装,该创建创建
  • 2D拓扑图
  • 大数据面试题整理——Hive
  • Python实现图像(边缘)锐化:梯度锐化、Roberts 算子、Laplace算子、Sobel算子的详细方法
  • 【电机控制】相电流重构——单电阻采样方案
  • #基础算法
  • 如何用猿大师办公助手实现OA系统中Word公文/合同在线编辑及流转?
  • Python中的列表是什么?它们有什么用途?
  • 探索现代软件开发中的持续集成与持续交付(CI/CD)实践
  • React 前端框架开发入门案例
  • 模拟 DDoS 攻击与防御实验
  • 【electron8】electron实现“图片”的另存为
  • Python分析假期对美国出生率的影响