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

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

    //创建标记A
    const markA = document.createElement("div");
    markA.style.position = "absolute";
    markA.style.left = "0px"; //此处设置位置
    markA.style.top = "0px";
    markA.style.display = "none";
    markA.textContent = "🔻";

    //创建标记A
    const 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.kler.cn/a/369159.html

相关文章:

  • pyvideotrans 最佳AI翻译软件
  • 前端零基础入门到上班:【Day1】什么是前端?
  • 持续深化信创布局,途普科技与统信软件完成产品兼容性互认证
  • BERT的中文问答系统23
  • 华为原生鸿蒙操作系统:我国移动操作系统的新篇章
  • 计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-10-24
  • 无人机之红外探测技术篇
  • [含文档+PPT+源码等]精品基于PHP实现的培训机构信息管理系统的设计与实现
  • 我用自研引擎做游戏:《干得好,托尼》
  • 【NOIP提高组】 自由落体
  • 网络编程 Linux环境 C语言实现
  • 电脑连接海康相机并在PictureBox和HWindowControl中分别显示。
  • Flink CDC系列之:学习理解核心概念——Data Source
  • “工业聚能 新质领航”|Softing 2024工博回顾:OPC DAY演讲“智能工厂中的OPC应用”
  • unity导入外部资源
  • 2D拓扑图
  • 912.排序数组(堆排序)
  • Diffusion原理及代码实现
  • 【学术会议论文投稿】深度解码:机器学习与深度学习的界限与交融
  • 【STM32编码器】【STM32】
  • Linux学习笔记 | sudo命令的基本使用
  • 鸿蒙HarmonyOS————ArkTs介绍(1)
  • [免费]SpringBoot+Vue智慧校园(校园管理)系统[论文+源码+SQL脚本]
  • 面试经典 150 题 第三周代码
  • Java 基于 poi 和 itextpdf 实现 excel 转 pdf
  • 安卓自定义文本组件