Bilibili倍速

一. 内容简介

Bilibili倍速

二. 软件环境

2.1 Tampermonkey

三.主要流程

3.1 创建javascript脚本

点击添加新脚本

就是在

(function() {
    'use strict';
    // 在这编写自己的脚本
})();

倍数脚本，含解析

// ==UserScript==
// @name         bilibili倍数
// @namespace    http://tampermonkey.net/
// @version      0.3
// @description  添加b站自定义倍数功能
// @author       You
// @match        https://www.bilibili.com/video/*
// @icon         https://img-blog.csdnimg.cn/f5d99485009b4e3b8a1de33064202353.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224
// @grant        none
// @license MIT
// ==/UserScript==


// 解析来自 http://t.csdn.cn/rkANJ，http://t.csdn.cn/nlUTQ
// "==UserScript=="           Greasemonkey 用它们来标记用户脚本的元数据段。这段注释可以放在用户脚本的任何部位，但经常会放在靠近顶部的地方
// @name                      脚本名字（可选，如果不存在，将会默认显示用户脚本的去掉拓展名.user.js的文件名）
// @namespace                 这个是命名空间；用来区分名称相同但是作者不同的用户脚本，一般都是写作者的个人网址，没有也可以写你的博客地址
// @version                   填写版本
// @description               关于用户脚本功能(可选，不写默认空白)
// @author                    作者
// @match                     这个是该脚本匹配的网址，支持通配符匹配
// @include		              这个也是该脚本匹配的网址，支持通配符匹配
// @exclude		              这个和 iclude 配合使用，排除匹配到的网址，优先于 include
//                            @include和 @exclude 是可选的，可以自定义执行和豁免的 URL，但必须每条规则各占一行。如果您没有任何定义， Greasemonkey 将会对所有的网站执行您的用户脚本。(等同于 @include *)。
// @icon                      应该是图标
// @grant                     none
// @license MIT



// 代码来自https://greasyfork.org/zh-CN/scripts/442030-%E8%87%AA%E5%AE%9A%E4%B9%89%E5%80%8D%E6%95%B0，
// 在此基础上进行删改
(function() {
    'use strict';
    function addOtherSpeed() {
        // 这是拿到倍数那个容器
        let speedList = document.getElementsByClassName('bpx-player-ctrl-playbackrate-menu')[0];
        // 看是否执行过了
        if (speedList.getAttribute('set') === 'true') {
            return ;
        }
        // 给这个容器设置一个属性
        speedList.setAttribute('set','true');
        let createSpeedLi = (speed,parentDom) => {
            // 里面每个速度那个栏都是li存放的
            let li25 = document.createElement('li');
            // 给创建的栏添加进倍数那个栏
            // 从头部加入
            // parentDom.appendChild(li25);
            // 从尾部加入
            parentDom.insertBefore(li25, parentDom.firstChild);
            // 样式是原来哔哩哔哩里面的样式
            li25.classList.add('bpx-player-ctrl-playbackrate-menu-item');
            // 原来的li中有个属性就是 data-value，用来设置倍数的
            li25.setAttribute('data-value',speed);
            // 添加一下控件的内容
            speed = speed.toFixed(1);
            li25.innerHTML = `${speed}x`;
            li25.onclick = function () {

                let speed_ = li25.getAttribute('data-value');
                // getElementsByTagName 是 JavaScript 中 Document 对象的一个方法，用于获取文档中具有指定标签名称的所有元素
                let v = document.getElementsByTagName('video');
                if (v.length) {
                    v = v[0];
                } else {
                    // 设置倍数
                    v = document.getElementsByTagName('bwp-video')[0];
                }
                v.playbackRate = parseFloat(speed_);
            }
            return li25;
        };
        createSpeedLi(2.5,speedList);
        createSpeedLi(3.0,speedList);
        createSpeedLi(3.5,speedList);
        new Array(...speedList.getElementsByTagName('li')).map(_=> {
            // 这块不清楚了，添加一个空事件，在点击自己添加的倍数时候，播放下一个视频时候也会按着这个倍数播放的，删除的话，倍数无法保存
            _.onclick = function() {
            }
        });
        return ``
    }
    function fullScreenAndDoubleTime() {
        addOtherSpeed();
        tryAndTryFns.pop();
    }

    // 不停的尝试
    let tryAndTryFns = [];
    function tryAndTry() {
        setInterval(() => {
            // tryAndTryFns.forEach(f => f());: 在每个定时间隔，tryAndTry函数会遍历数组 tryAndTryFns 中的所有函数，并且调用这些函数
            tryAndTryFns.forEach(f => f());
        },1000);
    }
    // 从这开始
    setTimeout(() => {
        tryAndTryFns.push(fullScreenAndDoubleTime);
        // 开始执行
        tryAndTry();
    },4000);
    // Your code here...
})();

        createSpeedLi(2.5,speedList);
        createSpeedLi(3.0,speedList);
        createSpeedLi(3.5,speedList);

假如要添加自己想要的倍数，在在这个地方添加就好了

3.2 测试运行

测试完成