啥？b站不支持倍速播放，那自己写一个

每一个不曾起舞的日子，都是对生活的辜负

前几年在B站学习的时候（没错，B站大学毕业的🐶）,碰到一个问题，就是不能超过2倍速播放，而我有时候是需要3倍速播放，甚至更高的倍速，这里有个简单办法，就是直接打开控制台，输入document.querySelector('video').playbackRate = xxx回车即可，但每次看完一个视频就需要控制台输入一次，甚是麻烦。 后来，想了想，觉得油猴应该有人去实现类似功能，不了解油猴的我套用一下维基百科的解释

Greasemonkey，简称GM，中文俗称为“油猴”。它让用户安装一些脚本使大部分HTML为主的网页于用户端直接改变得更方便易用。

然后我去搜了下，发现居然木有，没办法，就只能自食其力了，写完之后当时使用没问题，但这几年都没维护，现在想继续用，发现有些情况不能运行了。我又本着有轮子就不自己造轮子的原则，去搜了一下现在是否有可用脚本，发现还真有，我找了个下载量最高的安装试了一下。如图：

它是直接自己新建了几个自定义节点加在播放量那一行，不是很满足我想要的，我想要的是直接在原有的播放选择上加几个选项，如图：

所以，最终又得自己搞定了😬了

源码我就直接贴出来了

// ==UserScript==
// @name         b站多倍速播放
// @namespace    http://tampermonkey.net/
// @version      1.0.1
// @description  b站所有视频倍速播放增加了额外倍速的选择，增加的方式是在原有的倍速播放样式基础上增加，保证使用方便及样式统一
// @author       qixuan.yu
// @match        *://www.bilibili.com/*
// @match        *://m.bilibili.com/*
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
  'use strict';
  window.addEventListener('load', () => {
    const interval = setInterval(() => {
      const video = document.querySelector('video')
      const ul = [...document.querySelectorAll('ul')].find(
        node => node.firstElementChild.innerHTML === '2.0x'
      )
      const displayBackRate = ul.parentElement.firstElementChild
      let firstChild = ul.firstElementChild
      const rates = ['3.0',' 4.0']
      rates.forEach(rate => {
        const cloneNode = firstChild.cloneNode()
        if (firstChild.dataset.value) {
          cloneNode.dataset.value = rate
        }
        cloneNode.innerHTML = `${rate}x`
        ul.insertBefore(cloneNode, firstChild)
        firstChild = cloneNode
      })
      const backRateNodes = [...ul.children]
      let activeClass = ''
      backRateNodes.forEach(node => {
        if (node.classList.length === 2) {
          activeClass = node.classList[node.classList.length - 1]
        }
      })
      
      const changeSelectColor = (select) => {
        setTimeout(() => {
          select.classList.add(activeClass)
          backRateNodes.forEach(item => {
            if (item === select) {
            } else {
              if (item.classList.contains(activeClass)) {
                item.classList.remove(activeClass)
              }
            }
          }, 1000)
        })
      }

      ul.addEventListener('click', (e) => {
        const target = e.target
        const PlaybackRate = target.innerHTML.slice(0, target.innerHTML.length - 1)
        video.playbackRate = PlaybackRate
        setTimeout(() => {
          displayBackRate.innerHTML = PlaybackRate === '1.0' ? 
            '倍速' : `${PlaybackRate}x`
        })
        changeSelectColor(target)
      })

      if (video) {
        clearInterval(interval)
      }
    }, 1000)
  })

})();

1.因为代码比较简单，就简单介绍一下，主要就几个步骤：拿到倍速播放的列表节点ul

const ul = [...document.querySelectorAll('ul')].find(
  node => node.firstElementChild.innerHTML === '2.0x'
)

2.克隆ul的第一个子节点，改成自己想添加的倍速，同时依次插入到ul中

const rates = ['3.0',' 4.0']
  rates.forEach(rate => {
    const cloneNode = firstChild.cloneNode()
    if (firstChild.dataset.value) {
      cloneNode.dataset.value = rate
    }
    cloneNode.innerHTML = `${rate}x`
    ul.insertBefore(cloneNode, firstChild)
    firstChild = cloneNode
})

3.获取倍速选中时activeClass

let activeClass = ''
backRateNodes.forEach(node => {
  if (node.classList.length === 2) {
    activeClass = node.classList[node.classList.length - 1]
  }
})

4.最后就是监听倍速的点击事件，修改当前播放器倍速，将倍速展示结果修改成我们点击的，同时将点击的倍速标蓝

放下自己脚本的链接，感兴趣的可以安装玩玩

b站多倍速播放

使用油猴脚本，前提要去谷歌应用商店安装油猴插件

Tampermonkey