OOOH I've got one - I made a short script that lets me play any video on any site at arbitrary speed (speed controlled by arrow keys).
//@ts-check window.kVideoSpeed = 1; window.initialVolume = 1;
NUMPAD_3 = "99" NUMPAD_2 = "98" NUMPAD_6 = "102" NUMPAD_5 = "101"
UP_ARROW = "38" DOWN_ARROW = "40"
let timeoutId = null; document.onkeydown = (e) => { if (!document.querySelectorAll("video").length) { // no-op for pages with no videos return; } window.initialVolume = document.querySelector('video')?.volume || 1
let myDiv = getOrMakeDiv();
e = e || window.event;
let KEYCODE = e.keyCode;
// NOTE: can't use left/right b/c those go forward/back 10s on some sites
if ((KEYCODE == UP_ARROW || KEYCODE == NUMPAD_6) && window.kVideoSpeed < 4) {
// up arrow
window.kVideoSpeed += 0.5;
myDiv.textContent = window.kVideoSpeed;
} else if ((KEYCODE == DOWN_ARROW || KEYCODE == NUMPAD_5) && window.kVideoSpeed > 1) {
// down arrow
window.kVideoSpeed -= 0.5;
myDiv.textContent = window.kVideoSpeed;
}
for (let el of document.querySelectorAll("video")) {
el.playbackRate = window.kVideoSpeed;
// prevent volume from changing
setTimeout(() => {
el.volume = window.initialVolume
}, 100)
}
if (timeoutId) {
clearTimeout(timeoutId);
}
// set timeout to remove div
timeoutId = setTimeout(() => { myDiv.remove() }, 1000);
};
function getOrMakeDiv() {
if (!document.getElementById("myDiv")) { let div = document.createElement("div");
div.id = "myDiv";
// add styles to div
div.style.padding = "8px";
div.style.textAlign = "center";
div.style.fontSize = "16px";
div.style.position = "fixed";
div.style.fontWeight = "600";
div.style.border = "1px solid yellow";
div.style.color = "white";
div.style.backgroundColor = "black";
div.style.zIndex = "999999";
// insert div at the top of the body
if (document.fullscreenElement) {
document.fullscreenElement.prepend(div, document.fullscreenElement.firstChild)
}
else {
document.body.insertBefore(div, document.body.firstChild);
}
}
return document.getElementById("myDiv");
}