videoSpeedups.js

// ==UserScript==
// @name         Video Speedups
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Speed up videos with a few convenient buttons!
// @author       Element118
// @match        https://www.youtube.com/watch?v=*
// @match        https://www.facebook.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    // Create a new stylesheet for the elements you want to create
    // Hope for the best that the elements you want to make are not made already
    var styleEl = document.createElement('style');
    document.getElementsByTagName("head")[0].appendChild(styleEl);
    var styleSheet = styleEl.sheet;
    // Stylesheet rules
    styleSheet.insertRule(".multiplier-box { background-color: rgb(255, 255, 255); position: absolute; left: 100px; z-index: 1000; }", 0);
    styleSheet.insertRule(".multiplier-button { background-color: rgb(191, 191, 191); padding-left: 10px; }", 1);
    // List of available multipliers
    var multipliers = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2, 3, 4];
    // Just keep trying to add buttons
    var tryToAdd = setInterval(function() {
        let videos = document.getElementsByTagName("video");
        for (let i=0;i<videos.length;i++) {
            // Check that buttons haven't been added yet
            let children = videos[i].parentElement.parentElement.parentElement.childNodes;
            let addMultipliers = true;
            for (let j=0;j<children.length;j++) {
                if (children[j].classList.contains("multiplier-box")) {
                    addMultipliers = false;
                    break;
                }
            }
            if (!addMultipliers) continue;
            // Add buttons
            let multiplierBox = document.createElement("div");
            multiplierBox.classList.add("multiplier-box");
            let curVideo = i; // create a local variable for the current video
            // Create a button for each multiplier
            for (let j=0;j<multipliers.length;j++) {
                let curMult = multipliers[j], newButton = document.createElement("button");
                newButton.textContent = curMult+"x";
                newButton.classList.add("multiplier-button");
                newButton.addEventListener("click", function() {
                    document.getElementsByTagName("video")[curVideo].playbackRate = curMult;
                });
                multiplierBox.appendChild(newButton);
            }
            // Append it high enough in the hierarchy
            videos[i].parentElement.parentElement.parentElement.appendChild(multiplierBox);
        }
    }, 1000);
})();