写了个 b 站的倍速油猴脚本，可自定义播放速度，刷新不丢失

[tomoya92]

不知道为啥，b 站，ytb 都是将倍速设置写在 sessionStorage 里，刷新页面就丢失了，着实蛋疼，这个脚本可以记住设置的倍速，刷新页面自动加载之前设置的速度，解决了我长期的烦恼

https://greasyfork.org/en/scripts/388225

[JCZ2MkKb5S8ZX9pq]

能加入 1.25x 和 1.5x 么，其实这两个最常用 +1

[JCZ2MkKb5S8ZX9pq]

根据自己需要简单改了几个地方 lz 看看有没有用得上的

---

let style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = "#video_speed_div button {padding: 0 5px; margin-left: 2px; background: #eee; border: 0; color: #888; cursor: pointer;} .video_speed_div-button-active {background-color: #00b5e5!important; color: #fff!important;}";
document.getElementsByTagName('head').item(0).appendChild(style);

let videoSpeedElement = document.createElement("div");
videoSpeedElement.setAttribute("id", "video_speed_div");

let speedList = [1,1.25,1.5,2,3,4,5]
for(let i in speedList){
let spd = speedList[i]
let btn = document.createElement("button");
btn.innerHTML = "x"+spd;
btn.setAttribute("id", "third_video_plugin_btn_"+spd);
btn.addEventListener("click", changeVideoSpeed);
videoSpeedElement.appendChild(btn);
}

let videoElement = document.querySelector("#playerWrap");
let videoWidth = videoElement.clientWidth;
let videoHeight = videoElement.clientHeight;
let videoOffsetTop = videoElement.offsetTop;
let videoOffsetLeft = videoElement.offsetLeft;

videoSpeedElement.style.textAlign = "right";
videoSpeedElement.style.width = "300px";
videoSpeedElement.style.height = "30px";
videoSpeedElement.style.position = "absolute";
videoSpeedElement.style.top = (videoOffsetTop - 32) + "px";
videoSpeedElement.style.left = (videoOffsetLeft + videoWidth - 300) + "px";

document.body.appendChild(videoSpeedElement);

[tomoya92]

@JCZ2MkKb5S8ZX9pq 明天加一下

[tomoya92]

@JCZ2MkKb5S8ZX9pq 感谢，明天看看

[tomoya92]

@jamry @JCZ2MkKb5S8ZX9pq #22 不好意思一直忘，刚给加上了，倍速可选也加多了 `let speedArr = [1, 1.25, 1.5, 1.75, 2, 2.5, 3, 3.5, 4, 4.5, 5];`

[tomoya92]

@yeeyeung #14 我重新改了一下 append 位置，现在不是绝对定位了，滚动页面也正常了

[JCZ2MkKb5S8ZX9pq]

希望能参考一下我的修改，主要几点。
1. 选项稍微减少一点，3 倍以上的时候，0.5 倍不是很必要。
2. 减少按钮间距。
3. 我是前端，我有调整按钮和左侧文字垂直对齐的问题。这里一般会采用垂直居中，或者基线（文字底部）对齐。

---

希望如此改动的理由是，刚才油猴自动更新了，按钮变得很宽。
我是在一个竖屏的屏幕上播放的，宽度 1080，或者 960 的时候，按钮会过宽。1920 是正常的。

当然，如果你觉得修改麻烦的话，也希望能告知。如果你不介意的话，我想 fork 一个版本出来自己用。

[JCZ2MkKb5S8ZX9pq]

又改了一点点样式，关于宽度和垂直对齐，你看看有没有用得上的。

let videoSpeedElement;

let style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = "#video_speed_div button { outline: 0; padding:0 5px; min-width: 30px; margin: 1px -18px 0 20px; background-color: #eee; border: 0; color: #888; cursor: pointer;} .video_speed_div-button-active { border: 0!important; background-color: #00b5e5!important; color: #fff!important; }";
document.getElementsByTagName('head').item(0).appendChild(style);

let _interval = setInterval(function () {
if (document.querySelector(".bb-comment") && document.getElementById("video_speed_div") === null) {
addSpeedBtns();
}
}, 100);

function addSpeedBtns() {
videoSpeedElement = document.createElement("div");
videoSpeedElement.setAttribute("id", "video_speed_div");

let speedArr = [1, 1.25, 1.5, 1.75, 2, 3, 4, 5];

for (let i = 0; i < speedArr.length; i++) {
let speed = speedArr[i];
let btn = document.createElement("button");
btn.innerHTML = "x" + speed;
btn.setAttribute("id", "third_video_plugin_btn_" + speed);
btn.addEventListener("click", changeVideoSpeed);
videoSpeedElement.appendChild(btn);
}


document.querySelector("#viewbox_report").querySelector(".video-data:last-child").appendChild(videoSpeedElement);

clearInterval(_interval);

// 加载之间已经设置的速度, 在同一个页面中切换视频后，设置的速度就没了，这里用一个定时器，200ms 设置一下
setInterval(function () {
let third_video_plugin_speed = localStorage.getItem("third_video_plugin_speed");
if (!third_video_plugin_speed) third_video_plugin_speed = '1';
for (let i = 0; i < videoSpeedElement.childNodes.length; i++) {
let btn = videoSpeedElement.childNodes[i];
if (btn.getAttribute("id") === "third_video_plugin_btn_" + third_video_plugin_speed) {
btn.click();
}
}
document.getElementById("third_video_plugin_btn_" + third_video_plugin_speed).click();
}, 200);
}

[JCZ2MkKb5S8ZX9pq]

https://imgur.com/KKq6bVe.png
因为用了左对齐，感觉可以考虑把背景色去掉，跟文字会更融合一点，不会有一个色块未对齐的感觉。
之前右对齐有一个色块倒还好。但宽度变化会偏移位置，所以才左对齐了吧。

[JCZ2MkKb5S8ZX9pq]

https://imgur.com/CLY5pn3.png

又改了一个无背景的试试。顺便加了点 hover。
间距完全用 before 的分隔符控制了，如果要不可见颜色透明就行。

style.innerHTML = "
#video_speed_div button { outline: 0; margin: 2px 0 0; background: transparent; border: 0; color: #999; cursor: pointer;}
.video_speed_div-button-active { border: 0!important; background: transparent!important; color: #00a1d6!important;font-weight:bolder; }
#video_speed_div button:before{content:'·';margin:5px;color:#999!important;font-weight:normal!important}
#video_speed_div button:hover{color:#00b5e5}";

[tomoya92]

@JCZ2MkKb5S8ZX9pq #30 感谢

这两天又修了个 bug，现在样式我觉得还好，你要是不喜欢，可以自己修改一下

[JCZ2MkKb5S8ZX9pq]

@tomoya92 嗯，想起来可以额外写个 stylish，外挂个 css 上去。这样 js 的更新就不影响了。

[v2eros]

Y2B 调速很棒，感谢！