bilibili网页播放器增加倍速按钮

在B站（bilibili）网页播放器上增加一些额外的倍速按钮
当前为 2021-10-18 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         bilibili网页播放器增加倍速按钮
// @namespace    voeoc
// @version      0.0
// @description  在B站（bilibili）网页播放器上增加一些额外的倍速按钮
// @author       voeoc
// @include      https://www.bilibili.com/video/*
// @include      https://www.bilibili.com/bangumi/play/*
// @icon         https://www.google.com/s2/favicons?domain=bilibili.com
// @grant        none
// @run-at       document-idle
// ==/UserScript==

(function () {
    // 加入的按钮
    const ADD_BUTTON_LIST = [3, 4, 5, 10, 100];

    function addSpeedButton(btnMenu, speedValue) {
        let btnSpeed= btnMenu.querySelector('.bilibili-player-video-btn-speed-menu-list').cloneNode(true);
        btnSpeed.setAttribute("data-value", `${speedValue}`);
        btnSpeed.classList.add("voeoc-virtual-button")
        btnSpeed.innerHTML = `${speedValue.toFixed(1)}x`;

        btnSpeed.onclick = function() {
            // 临时按下最后一个0.5倍速的按钮，以便可以切换回1x倍速（牺牲掉最后一个0.5x）
            btnMenu.querySelector('.bilibili-player-video-btn-speed-menu-list:last-child').click();
            // 设定视频的倍速
            document.querySelector('.bilibili-player-video video').playbackRate=speedValue;
            console.log(`voeoc: 设定倍速${speedValue}`)
            // 修改显示的文字
            document.querySelector('.bilibili-player-video-btn-speed-name').innerHTML = btnSpeed.innerHTML;

            // 临时隐藏当前倍速的高亮
            let nowHighlightItem = document.querySelector('.bilibili-player-video-btn-speed-menu-list.bilibili-player-active');
            if (nowHighlightItem != null) {
                nowHighlightItem.classList.remove("bilibili-player-active");
            }
        };

        // 在最前面插入按钮
        btnMenu.insertBefore(btnSpeed, btnMenu.childNodes[0]);
    }

    function waitElementLoaded(selector, func) {
        let timer = setInterval(() => {
            let element = document.querySelector(selector);
            console.log(`voeoc: 查找元素${selector}：${element}`)
            if(element != null) {
                // 清除定时器
                clearInterval(timer);
                func(element);
            }
        }, 100);
    }

    // 等待视频组件加载完毕
    waitElementLoaded('video', (bilibiliPlayer)=>{
        bilibiliPlayer.onloadedmetadata = function() {
            // 等待视频速率控制组件加载完毕
            waitElementLoaded('.bilibili-player-video-btn-speed-menu', (speedMenu)=>{
                    // 删除所有新添加的按钮
                    let virtualButtonList = speedMenu.getElementsByClassName("voeoc-virtual-button");
                    for(let i=0; i<virtualButtonList.length; ++i) {
                        speedMenu.removeChild(virtualButtonList[i]);
                    }
                    // 添加按钮节点
                    for(let i=0; i<ADD_BUTTON_LIST.length; ++i) {
                        addSpeedButton(speedMenu, ADD_BUTTON_LIST[i]);
                    }
            });
        };
    });
})();
欢迎访问Greasy Fork镜像
