bili尺寸切换/自动连播

3为4:3 4为16:9 实际是从第一行到第二行按顺序从0排列
安裝腳本 ?
Wrap lines
// ==UserScript==
// @name         bili尺寸切换/自动连播
// @namespace    http://tampermonkey.net/
// @version      2024-07-20
// @description  3为4:3 4为16:9 实际是从第一行到第二行按顺序从0排列
// @author       Rainsc
// @match        https://www.bilibili.com/video/*
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    let isRunning = false;
    let queryValue = '';
    let subtitleIntervalId = null;

    // 创建悬浮窗
    function createFloatingWindow() {
        const floatingWindow = document.createElement('div');
        floatingWindow.id = 'floating-window';
        floatingWindow.style.position = 'fixed';
        floatingWindow.style.top = '50%';
        floatingWindow.style.left = '0';
        floatingWindow.style.transform = 'translateY(-50%)';
        floatingWindow.style.padding = '10px';
        floatingWindow.style.zIndex = '9999';
        floatingWindow.style.background = '#ffffff';
        floatingWindow.style.border = '1px solid #cccccc';
        floatingWindow.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.1)';

        document.body.appendChild(floatingWindow);

        // 创建单选框组
        const autoplayGroup = document.createElement('div');
        autoplayGroup.style.marginBottom = '10px';
        autoplayGroup.innerHTML = `
            <div style="margin-bottom: 5px;"><strong>是否连播</strong></div>
            <label><input type="radio" name="autoplay" id="autoplay-0" value="0" checked="checked"> 开启</label>
            <label><input type="radio" name="autoplay" id="autoplay-1" value="1"> 关闭</label>
        `;
        floatingWindow.appendChild(autoplayGroup);

        const sizeGroup = document.createElement('div');
        sizeGroup.style.marginBottom = '10px';
        sizeGroup.innerHTML = `
            <div style="margin-bottom: 5px;"><strong>尺寸</strong></div>
            <label><input type="radio" name="size" id="size-2" value="2"> 自动</label>
            <label><input type="radio" name="size" id="size-3" value="3"> 4:3</label>
            <label><input type="radio" name="size" id="size-4" value="4" checked="checked"> 16:9</label>
        `;
        floatingWindow.appendChild(sizeGroup);

        // 创建字幕复选框
        const subtitleGroup = document.createElement('div');
        subtitleGroup.style.marginBottom = '10px';
        subtitleGroup.innerHTML = `
            <div style="margin-bottom: 5px;"><strong>字幕</strong></div>
            <label><input type="checkbox" id="subtitle-checkbox" checked="checked"> 开启</label>
        `;
        floatingWindow.appendChild(subtitleGroup);

        // 创建全屏复选框
        const fullscreenGroup = document.createElement('div');
        fullscreenGroup.style.marginBottom = '10px';
        fullscreenGroup.innerHTML = `
            <div style="margin-bottom: 5px;"><strong>全屏</strong></div>
            <label><input type="checkbox" id="fullscreen-checkbox" checked="checked"> 开启</label>
        `;
        floatingWindow.appendChild(fullscreenGroup);

        // 创建播放速度复选框组
        const speedGroup = document.createElement('div');
        speedGroup.style.marginBottom = '10px';
        speedGroup.innerHTML = `
            <div style="margin-bottom: 5px;"><strong>播放速度</strong></div>
            <label><input type="radio" name="speed" value="1"> 1x</label>
            <label><input type="radio" name="speed" value="1.25" checked="checked"> 1.25x</label>
            <label><input type="radio" name="speed" value="1.5"> 1.5x</label>
            <label><input type="radio" name="speed" value="2"> 2x</label>
        `;
        floatingWindow.appendChild(speedGroup);

        // 创建按钮
        const button = document.createElement('button');
        button.textContent = '设置选项';
        button.style.display = 'block';
        button.style.margin = '0 auto';
        button.addEventListener('click', handleButtonClick);

        floatingWindow.appendChild(button);

        // 创建状态提示
        const status = document.createElement('div');
        status.id = 'script-status';
        status.textContent = '脚本未运行';
        status.style.marginTop = '10px';
        status.style.textAlign = 'center';

        floatingWindow.appendChild(status);

        // 创建隐藏/显示悬浮窗的按钮
        const toggleButton = document.createElement('button');
        toggleButton.id = 'toggle-button';
        toggleButton.textContent = '隐藏/显示面板';
        toggleButton.style.position = 'fixed';
        toggleButton.style.top = '10px';
        toggleButton.style.left = '10px';
        toggleButton.style.zIndex = '10000';
        toggleButton.addEventListener('click', toggleFloatingWindow);

        document.body.appendChild(toggleButton);
    }

    // 切换悬浮窗的可见性
    function toggleFloatingWindow() {
        const floatingWindow = document.getElementById('floating-window');
        if (floatingWindow.style.display === 'none') {
            floatingWindow.style.display = 'block';
        } else {
            floatingWindow.style.display = 'none';
        }
    }

    // 处理按钮点击事件
    function handleButtonClick() {
        const status = document.getElementById('script-status');

        if (isRunning) {
            alert('脚本正在运行中，请稍候...');
            return;
        }

        // 获取单选框和复选框的选择状态
        const autoplayRadios = document.getElementsByName('autoplay');
        const sizeRadios = document.getElementsByName('size');
        const subtitleCheckbox = document.getElementById('subtitle-checkbox');
        const fullscreenCheckbox = document.getElementById('fullscreen-checkbox');
        const speedRadios = document.getElementsByName('speed');

        const selectedAutoplay = Array.from(autoplayRadios).find(radio => radio.checked);
        const selectedSize = Array.from(sizeRadios).find(radio => radio.checked);
        const selectedSpeed = Array.from(speedRadios).find(radio => radio.checked);

        // 因为前两个实际上属于一个数组  所以只能判断前两个同时选择
        if (!selectedAutoplay || !selectedSize) {
            alert('请同时选择一个连播选项和一个尺寸选项');
            return;
        }

        const selectedAutoplayValue = selectedAutoplay.value;
        const selectedSizeValue = selectedSize.value;
        const selectedSpeedValue = selectedSpeed ? selectedSpeed.value : '1';
        const isSubtitleEnabled = subtitleCheckbox.checked;
        const isFullscreenEnabled = fullscreenCheckbox.checked;

        isRunning = true;

        // 更新状态提示
        status.textContent = '脚本正在运行...';

        const intervalId = setInterval(() => {
            const elements = document.getElementsByClassName('bui-radio-input');
            if (elements.length > 4) {
                elements[selectedAutoplayValue].click();
                elements[selectedSizeValue].click();

                // 打印日志：点击了选中的元素
                console.log(`Clicked elements: autoplay - ${selectedAutoplayValue}, size - ${selectedSizeValue}`, elements[selectedAutoplayValue], elements[selectedSizeValue]);

                // 成功后停止定时器并更新状态提示
                clearInterval(intervalId);
                status.textContent = '脚本已成功设置目标元素';
                isRunning = false;

                // 打印日志：脚本成功设置目标元素
                console.log('脚本成功设置目标元素');
            } else {
                // 如果找不到足够的元素，清除 interval 并更新状态提示
                clearInterval(intervalId);
                status.textContent = '脚本停止运行（找不到足够的元素）';
                isRunning = false;

                // 打印日志：找不到足够的元素
                console.log('找不到足够的元素，停止脚本运行');
            }
        }, 100);

        // 处理播放速度
        if (selectedSpeedValue !== '1') {
            setTimeout(() => {
                const videoElement = document.querySelector('video');
                if (videoElement) {
                    videoElement.playbackRate = parseFloat(selectedSpeedValue);
                    console.log(`播放速度设置为${selectedSpeedValue}x`);
                }
            }, 1000);
        }

        // 处理字幕
        if (isSubtitleEnabled) {
            if (subtitleIntervalId) clearInterval(subtitleIntervalId);

            subtitleIntervalId = setInterval(function() {
                // 获取URL中的查询字符串部分
                const queryString = window.location.search;
                // 解析查询字符串，将参数以对象的形式存储
                const params = new URLSearchParams(queryString);
                // 获取特定参数的值
                const value = params.get('p');
                if (queryValue !== value) {
                    openSubtitle();
                    queryValue = value;
                }
            }, 2000);

            window.addEventListener('unload', function(_event) {
                clearInterval(subtitleIntervalId);
            });

            function openSubtitle(){
                setTimeout(() => {
                    const subtitleButton = document.querySelector('.bpx-player-ctrl-btn[aria-label="字幕"] .bpx-common-svg-icon');
                    if (subtitleButton) subtitleButton.click();
                }, 1000);
            }

            openSubtitle();  // 确保在启动时立即打开字幕
        } else {
            if (subtitleIntervalId) {
                clearInterval(subtitleIntervalId);
                subtitleIntervalId = null;
            }
        }

        // 处理全屏
        if (isFullscreenEnabled) {
            setTimeout(() => {
                const fullscreenButton = document.querySelector('.bpx-player-ctrl-btn.bpx-player-ctrl-full');
                if (fullscreenButton) {
                    fullscreenButton.click();
                    console.log('全屏模式已开启');
                }
            }, 1000);
        }
    }

    // 初始化脚本，调用创建悬浮窗的函数
    createFloatingWindow();

    // 在页面加载完成后延迟10秒触发一次脚本执行
    //    window.onload = function() {
    //        setTimeout(function() {
    //            handleButtonClick();
    //        }, 10000); // 10秒延迟
    //    };

})();
欢迎访问Greasy Fork镜像
