bilibili 视频3倍速

无侵入的解锁哔哩哔哩视频三倍速，直接在倍速中选择3x即可。

// ==UserScript==
// @name         bilibili 视频3倍速
// @namespace    http://tampermonkey.net/
// @version      2024-04-14.1
// @description   无侵入的解锁哔哩哔哩视频三倍速，直接在倍速中选择3x即可。
// @author       vxoxv
// @match        https://www.bilibili.com/video/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=bilibili.com
// @license      AGPL
// @grant        none
// ==/UserScript==

(function () {
    "use strict";

    // Your code here...
    const addedRate = [2.5, 3.0];

    const rateMenuClass = "bpx-player-ctrl-playbackrate-menu";
    const rateItemClass = "bpx-player-ctrl-playbackrate-menu-item";
    const rateItemActiveClass = "bpx-state-active";
    const rateAttribute = "data-value";
    const videoWrapperClass = "bpx-player-video-wrap";

    function log(str, label) {
        console.log(`脚本log-${label ? label : "$"}: ${str}`);
    }

    function createRateLi(rate, video) {
        let rateThreeLi = document.createElement("li");
        rateThreeLi.classList.add(rateItemClass);
        rateThreeLi.innerText = `${rate}x`;
        rateThreeLi.setAttribute(rateAttribute, rate);
        rateThreeLi.style.color = "red";
        rateThreeLi.addEventListener("click", function () {
            rateThreeLi.classList.toggle(rateItemActiveClass);
            video.playbackRate = rate;
        });
        return rateThreeLi;
    }

    setTimeout(() => {
        log("脚本开始执行");
        let rateMenu = document.querySelector(`.${rateMenuClass}`);
        log(rateMenu, "倍速菜单dom");

        let video = document.querySelector(`.${videoWrapperClass} video`);
        log(video, "视频dom");

        addedRate.forEach((rate) => {
            let rateLi = createRateLi(rate, video);
            log(createRateLi(2.5, video), `创建${rate}倍速<li>`);
            rateMenu.appendChild(rateLi);
        });
        log("脚本结束执行");
    }, 2000);
})();