☰

Video Element Rate Controller Re-dux

Add keyboard shortcuts that will increase/decrease the playback rate for video elements.

目前为 2019-04-20 提交的版本。查看 最新版本。

// ==UserScript==
// @name         Video Element Rate Controller Re-dux
// @namespace    https://github.com/mirnhoj/video-element-playbackrate-setter
// @version      2.2
// @description  Add keyboard shortcuts that will increase/decrease the playback rate for video elements.
// @include      http*://*.youtube.com/*
// @include      http*://*.gfycat.com/*
// @include      http*://*.vimeo.com/*
// @include      https://www.facebook.com/video.php*
// @include      https://www.facebook.com/*/videos/*
// @include      https://www.kickstarter.com/*
// @require      https://cdnjs.cloudflare.com/ajax/libs/big.js/5.1.2/big.js
// @grant        GM_registerMenuCommand

// ==/UserScript==
/* jshint esversion: 6 */
//
// if you want to extend the functionality of this script to other sites
// besides youtube, add additional @include keys to the metadata block.
//
// if you want to change the default playback rate from 1x, change the line
// "var currentPlaybackRate = 1;" to equal something other than 1, like 1.3 to
// have all videos start playing at an increased speed, or 0.7 to have all
// videos start playing at a decreased speed.
//
// if you want change the granularity of the playback rate adjustment, change
// the line "var speedStep = 0.1;" to equal something other than 0.1, like 0.01
// for more granular adjustments, or 0.25 for less granular adjustments.


// These values are the default values for initialization
let speedStep = 0.1;
let displayTimeMilliSec = 1500;
let enhancerExtention = true;
let pref = 'preference-changed';
let eventName = 'speed';

let timeoutID;
const infobox = document.createElement('h1');
let showDisplay = false;
let keyIncreaseSpeed = ']';
let keyReduceSpeed = '[';
let keyResetSpeed = '\\';

function getVal(variable) {
    let value;
    let storage = (localStorage || (sessionStorage ||
        (window.content.localStorage ? window.content.localStorage : null)));
    try {
        switch (variable) {
        case 'speedStep':
            value = storage.getItem('VERCRspeedStep');
            //                 console.log('Variable "' + variable + '" is ' + value);
            return Number(value);
        case 'displayTimeMilliSec':
            value = storage.getItem('VERCRdisplayTimeMS');
            //                 console.log('Variable "' + variable + " is " + value);
            return Number(value);
        case 'enhancerExtention':
            value = storage.getItem('VERCRenhancerExtention');
            //                 console.log('Variable "' + variable + " is " + value);
            return value;
        case 'pref':
            value = storage.getItem('VERCRpref');
            //                 console.log('Variable "' + variable + " is " + value);
            return value;
        case 'eventName':
            value = storage.getItem('VERCReventName');
            //                 console.log('Variable "' + variable + " is " + value);
            return value;
        case 'keyIncreaseSpeed':
            return value;
        case 'keyReduceSpeed':
            return value;
        case 'keyResetSpeed':
            return value;
        default:
            return null;
        }
    } catch (e) {
        if (e.name === 'NS_ERROR_FILE_CORRUPTED') {
            storage = sessionStorage || null; // set the new storage if fails
            storage.setItem('VERCRspeedStep', speedStep);
            storage.setItem('VERCRdisplayTimeMS', displayTimeMilliSec);
            storage.setItem('VERCRenhancerExtention', enhancerExtention);
            storage.setItem('VERCRpref', pref);
            storage.setItem('VERCReventName', eventName);
        }
    }
}

function setVal(variable, value) {
    let storage = (localStorage || (sessionStorage ||
        (window.content.localStorage ? window.content.localStorage : null)));
    try {
        switch (variable) {
        case 'speedStep':
            storage.setItem('VERCRspeedStep', Number(value));
            console.log(`Setting "${variable}" to ${value}`);
            return value;
        case 'displayTimeMilliSec':
            storage.setItem('VERCRdisplayTimeMS', Number(value));
            console.log(`Setting "${variable}" to ${value}`);
            return value;
        case 'enhancerExtention':
            storage.setItem('VERCRenhancerExtention', value);
            console.log(`Setting "${variable}" to ${value}`);
            return value;
        case 'pref':
            storage.setItem('VERCRpref', value);
            console.log(`Setting "${variable}" to ${value}`);
            return value;
        case 'eventName':
            storage.setItem('VERCReventName', value);
            console.log(`Setting "${variable}" to ${value}`);
            return value;
        default:
            return null;
        }
    } catch (e) {
        if (e.name === 'NS_ERROR_FILE_CORRUPTED') {
            storage = sessionStorage || null; // set the new storage if fails
            storage.setItem('VERCRspeedStep', speedStep);
            storage.setItem('VERCRdisplayTimeMS', displayTimeMilliSec);
            storage.setItem('VERCRenhancerExtention', enhancerExtention);
            storage.setItem('VERCRpref', pref);
            storage.setItem('VERCReventName', eventName);
        }
    }
}

function GMsetup() {
    if (GM_registerMenuCommand) {
        GM_registerMenuCommand('Video Rate Re-dux: Set adjustment rate', () => {
            const curEntry = getVal('speedStep');
            speedStep = prompt('New adjustment rate:\n(e.g., 0.1 = 10% faster)', curEntry);
            if (speedStep !== null) {
                while (isNaN(speedStep)) {
                    speedStep = prompt('Please input a valid number!\n\nNew adjustment rate:\n(e.g., 0.1 = 10% faster)', curEntry);
                }
                setVal('speedStep', speedStep);
            }
        });
        // GM_registerMenuCommand('Video Rate Re-dux: Set keyboard shortcuts', () => {
        //     const curEntry = `${getVal('keyIncreaseSpeed')}, ${getVal('keyReduceSpeed')}, ${getVal('keyResetSpeed')}`;
        //     // W.I.P.
        // });
        GM_registerMenuCommand('Video Rate Re-dux: Set display timeout', () => {
            const curEntry = getVal('displayTimeMilliSec');
            displayTimeMilliSec = prompt('New display timeout length (in milliseconds):', curEntry);
            if (displayTimeMilliSec !== null) {
                while (isNaN(displayTimeMilliSec)) {
                    displayTimeMilliSec = prompt('Please input a valid number!\n\nNew display timeout length (in milliseconds):', curEntry);
                }
                setVal('displayTimeMilliSec', displayTimeMilliSec);
            }
        });
        GM_registerMenuCommand('Video Rate Re-dux: Set extention usage', () => {
            let curEntry = getVal('enhancerExtention');
            curEntry = curEntry === true ? 'Yes' : 'No';
            enhancerExtention = prompt('Are you using Enhancer for YouTube?:', curEntry);
            if (enhancerExtention !== null) {
                if (typeof (enhancerExtention) === 'string') {
                    const regex = /ye?s?|true|i am/i;
                    enhancerExtention = regex.test(enhancerExtention);
                    const enhancerExtentionOutput = regex.test(enhancerExtention) === true ? 'Yes' : 'No';
                    alert(`Extention use has been set to: "${enhancerExtentionOutput}"\n`);
                } else {
                    enhancerExtention = false;
                }
                setVal('enhancerExtention', enhancerExtention);
            }
        });
    }
}

function init() {
    let VERCRspeedStep = localStorage.getItem('VERCRspeedStep');
    let VERCRdisplayTimeMS = localStorage.getItem('VERCRdisplayTimeMS');
    let VERCRenhancerExtention = localStorage.getItem('VERCRenhancerExtention');
    let VERCRpref = localStorage.getItem('VERCRpref');
    let VERCReventName = localStorage.getItem('VERCReventName');
    if (!VERCRspeedStep) {
        VERCRspeedStep = speedStep;
        localStorage.setItem('VERCRspeedStep', Number(VERCRspeedStep));
    }
    if (!VERCRdisplayTimeMS) {
        VERCRdisplayTimeMS = displayTimeMilliSec;
        localStorage.setItem('VERCRdisplayTimeMS', Number(VERCRdisplayTimeMS));
    }
    if (!VERCRenhancerExtention) {
        VERCRenhancerExtention = enhancerExtention;
        localStorage.setItem('VERCRenhancerExtention', VERCRenhancerExtention);
    }
    if (!VERCRpref) {
        VERCRpref = pref;
        localStorage.setItem('VERCRpref', VERCRpref);
    }
    if (!VERCReventName) {
        VERCReventName = 'speed';
        localStorage.setItem('VERCReventName', VERCReventName);
    }
}

function showInfobox(rate) {
    const bigRate = new Big(rate);
    // update rate indicator.
    infobox.innerHTML = `${bigRate}x`;
    // show infobox
    infobox.style.visibility = 'visible';
    // clear out any previous timers and have the infobox hide after the pre-set time period
    window.clearTimeout(timeoutID);
    timeoutID = window.setTimeout(() => {
        infobox.style.visibility = 'hidden';
    }, getVal('displayTimeMilliSec'));
}

function setPlaybackRate(rate, shouldShowInfobox) {
    showDisplay = false;
    // grab the video elements and set their playback rate.
    const videoElement = document.getElementsByTagName('video')[0];
    videoElement.playbackRate = rate;
    // add infobox to dom if it doesn't already exist.
    if (videoElement && !document.getElementById('playbackrate-indicator')) {
        videoElement.parentElement.appendChild(infobox);
    }
    if (shouldShowInfobox) {
        showInfobox(rate);

    }
}

// mimic vlc keyboard shortcuts
function addKeyListener() {
    window.addEventListener('keydown', (event) => {
        const key = event.key;
        const videoElement = document.getElementsByTagName('video')[0];
        let currentPlaybackRate = new Big(videoElement.playbackRate);
        speedStep = new Big(getVal('speedStep'));
        if (key === keyReduceSpeed) {
            // decrease playback rate if '[' is pressed
            //                 currentPlaybackRate -= speedStep;
            currentPlaybackRate = currentPlaybackRate.minus(speedStep);
            //                 console.log('Setting "currentPlaybackRate" to ' + currentPlaybackRate);
            showDisplay = true;
            setPlaybackRate(currentPlaybackRate, showDisplay);
        } else if (key === keyIncreaseSpeed) {
            // increase playback rate if ']' is pressed
            //                 currentPlaybackRate += speedStep;
            currentPlaybackRate = currentPlaybackRate.add(speedStep);
            //                 console.log('Setting "currentPlaybackRate" to ' + currentPlaybackRate);
            showDisplay = true;
            setPlaybackRate(currentPlaybackRate, showDisplay);
        } else if (key === keyResetSpeed) {
            // reset playback rate to default (1) if '\' is pressed
            currentPlaybackRate = 1;
            showDisplay = true;
            setPlaybackRate(currentPlaybackRate, showDisplay);
        }
        if (getVal('enhancerExtention') === true) {
            pref = getVal('pref');
            eventName = getVal('eventName');
            window.postMessage({
                enhancerforyoutube: pref,
                name: eventName,
                value: currentPlaybackRate,
            }, '*');
        }
    });
}

// show the current speed display on the video when mouse wheel is rolled on the speed element if using Enhancer For Youtube
function addWheelListener() {
    const enhancerToolbar = document.getElementById('enhancer-for-youtube-toolbar');
    const enhancerToolbarChildren = enhancerToolbar.children[0].children;
    let speedChild;
    eventName = getVal('eventName');
    for (let i = 0; i < enhancerToolbarChildren.length; i++) {
        if (enhancerToolbarChildren[i].dataset.name === eventName) {
            speedChild = enhancerToolbarChildren[i];
        }
    }
    if (speedChild) {
        speedChild.addEventListener('wheel', (event) => {
            const wDelta = event.wheelDelta < 0 ? 'down' : 'up';
            const videoElement = document.getElementsByTagName('video')[0];
            const currentPlaybackRate = videoElement.playbackRate;
            switch (wDelta) {
            case 'down':
                // currentPlaybackRate -= speedStep; // uncomment to actually modify the playback speed
                showInfobox(currentPlaybackRate);
                break;
            case 'up':
                // currentPlaybackRate += speedStep; // uncomment to actually modify the playback speed
                showInfobox(currentPlaybackRate);
                break;
            default:
                break;
            }
        });
    }
}

function onExtentionReady() {
    addWheelListener();
}

async function onReady() {
    addKeyListener();
    if (getVal('enhancerExtention') === true) {
        let i = 0;
        do {
            await wait(200);
            i++;
        } while (!document.getElementById('enhancer-for-youtube-toolbar') && i < 50);
        onExtentionReady(); // Or setTimeout(onReady, 0); if you want it consistently async
    }
}

function wait(time) {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve();
        }, time);
    });
}

function Ext_Detect_NotInstalled(ExtName, ExtID, obj) {
    console.log(`${ExtName} Not Installed`);
    setVal('enhancerExtention', false);
    obj.parentNode.removeChild(obj);
}

function Ext_Detect_Installed(ExtName, ExtID, obj) {
    console.log(`${ExtName} Installed`);
    setVal('enhancerExtention', true);
    obj.parentNode.removeChild(obj);
}

const Ext_Detect = function (ExtName, ExtID) {
    const IsFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
    const IsChrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
    if (IsFirefox === true) {
        const sMoz = document.createElement('script');
        sMoz.onload = function () { Ext_Detect_Installed(ExtName, ExtID, sMoz); };
        sMoz.onerror = function () { Ext_Detect_NotInstalled(ExtName, ExtID, sMoz); };
        sMoz.src = `moz-extension://${ExtID}/resources/youtube-polymer.js`;
        document.body.appendChild(sMoz);
    } else if (IsChrome === true) {
        const sChrome = document.createElement('script');
        sChrome.onload = function () { Ext_Detect_Installed(ExtName, ExtID); };
        sChrome.onerror = function () { Ext_Detect_NotInstalled(ExtName, ExtID); };
        sChrome.src = `chrome-extension://${ExtID}/resources/youtube-polymer.js`;
        document.body.appendChild(sChrome);
    }
};

function main() {
    init();
    //     window.onload = function() { Ext_Detect("Enhancer for YouTube", addonID); };
    GMsetup();
    infobox.setAttribute('id', 'playbackrate-indicator');
    infobox.style.position = 'absolute';
    infobox.style.top = '10%';
    infobox.style.right = '10%';
    infobox.style.color = 'rgba(255, 0, 0, 1)';
    infobox.style.zIndex = '99999'; // ensures that it shows above other elements.
    infobox.style.visibility = 'hidden';
    infobox.style.marginTop = '3%';
    if (document.readyState !== 'loading') {
        onReady(); // Or setTimeout(onReady, 0); if you want it consistently async
    } else {
        document.addEventListener('DOMContentLoaded', onReady);
    }
}

main();

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址