用 Javascript 给 bilibili 添加多倍速标签

最近一直在B站上网课，基本速度都是2.0倍速，最近碰到个老师，这语速慢的开了2倍速觉得和1倍速一样。虽然可以在 console 上更改 video 的 playbackRate 的属性，可以改变速率。但是每切换一个视频就得自己改一遍有点麻烦。通过油猴 Greasemonkey 加载 Js 脚本，可以让B站自带3.0x倍速标签。

看下效果：

关于 Greasemonkey 的安装就不多介绍了，Chrome 叫做 Tampermonkey，不多说了，上代码：

// ==UserScript==
// @name         bilibili视频3倍速
// @version      1.0.1
// @description  bilibili视频3倍速选择
// @author       Forece
// @include      *://*.bilibili.com/*
// @include      *://*.bilibili.tv/*
// @run-at       document-start
// @grant        none
// ==/UserScript==

function callback() {
    var li = document.querySelector(".bilibili-player-video-btn-speed-menu-list");
    var ul = document.querySelector(".bilibili-player-video-btn-speed-menu");
    var button = document.querySelector(".bilibili-player-video-btn-speed-name");
    var lis = document.querySelectorAll(".bilibili-player-video-btn-speed-menu-list")


    // 创建 3.x 标签
    var newLi = document.createElement("li");
    newLi.className = "bilibili-player-video-btn-speed-menu-list";
    newLi.setAttribute("data-value", "3");
    newLi.innerText = "3.0x";
    // 插入标签
    li.insertAdjacentElement("beforebegin", newLi);

    // 速率达到3倍
    newLi.onclick = function () {
        var video = document.querySelector("video");
        video.playbackRate = 3.0;
        button.innerText = "3.0x";
        resume();
        newLi.className = "bilibili-player-video-btn-speed-menu-list bilibili-player-active";
        ul.style.display = "none";
    };

    // button 按钮恢复
    button.onmouseover = function () {
        ul.style.display = "block";
    };

    // 恢复 Class
    function resume() {
        lis.forEach(function (item) {
            item.className = "bilibili-player-video-btn-speed-menu-list"
            item.onclick = function () {
                newLi.className = "bilibili-player-video-btn-speed-menu-list"
                item.className = "bilibili-player-video-btn-speed-menu-list bilibili-player-active"
            }
        })
    }
}

function callback2() {
    var newLiText = document.querySelector(
        ".bilibili-player-video-btn-speed-menu-list"
    ).innerHTML;

    if (newLiText != "3.0x") {
        callback();
    }
}

var ischeck = setInterval(callback2, 3200);
var timer = setTimeout(callback, 3000);
window.addEventListener("load", timer);

个人感觉来说B站最多3倍速就够用了，网上看到其他脚本甚至达到了8倍速。这是要干嘛？？最后附一个 Console 更改视频速度的代码：

document.querySelector("video").playbackRate = 3.0;