用 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");

  // 创建 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";
    ul.style.display = "none";
  };

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

// 页面刷新检测
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;

相关评论:

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据