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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值