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