speed up any HTML5 video (eg. Netflix, Disney+, Hulu, Amazon Prime, etc.)

README.md

copy paste it into either browser console, or in Arc Browser as a Boost :)

speedupVideo.js

//@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;
// Jan 2024, Netflix overrides onkeydown, so have to use onkeyup instead
document.onkeyup = (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");
}