Add keyboard shortcuts that will increase/decrease the playback rate for video elements.
// ==UserScript==
// @name Video Element Rate Controller Re-dux
// @namespace https://github.com/mirnhoj/video-element-playbackrate-setter
// @version 2.5
// @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/*
// @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 or to
// the "User includes" or "User matches" sections in the Settings.
//
// 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
const defaults = {
speedStep: 0.1,
displayTimeMilliSec: 1500
};
// script variables
let timeoutID = null;
let showValuesOnVideo = true; // true to show new value on the video
let keyIncreaseSpeed = ']';
let keyReduceSpeed = '[';
let keyResetSpeed = '\\';
const infoboxId = 'playbackrate-indicator';
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');
return Number(value);
case 'displayTimeMilliSec':
value = storage.getItem('VERCRdisplayTimeMS');
return Number(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', defaults.speedStep);
storage.setItem('VERCRdisplayTimeMS', defaults.displayTimeMilliSec);
}
}
}
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));
return value;
case 'displayTimeMilliSec':
storage.setItem('VERCRdisplayTimeMS', Number(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', defaults.speedStep);
storage.setItem('VERCRdisplayTimeMS', defaults.displayTimeMilliSec);
}
}
}
function GMsetup() {
if (GM_registerMenuCommand) {
GM_registerMenuCommand('Set adjustment rate', () => {
const curEntry = getVal('speedStep');
let 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('Set display timeout', () => {
const curEntry = getVal('displayTimeMilliSec');
let 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);
}
});
}
}
function init() {
let VERCRspeedStep = localStorage.getItem('VERCRspeedStep');
let VERCRdisplayTimeMS = localStorage.getItem('VERCRdisplayTimeMS');
if (!VERCRspeedStep) {
VERCRspeedStep = defaults.speedStep;
localStorage.setItem('VERCRspeedStep', Number(VERCRspeedStep));
}
if (!VERCRdisplayTimeMS) {
VERCRdisplayTimeMS = defaults.displayTimeMilliSec;
localStorage.setItem('VERCRdisplayTimeMS', Number(VERCRdisplayTimeMS));
}
}
function getInfobox(videoElement) {
if (!videoElement) return;
let infoboxEl = document.getElementById(infoboxId);
if (!infoboxEl) {
// create and add infobox to dom if it doesn't already exist.
infoboxEl = document.createElement('h1');
infoboxEl.setAttribute('id', infoboxId);
infoboxEl.style.position = 'absolute';
infoboxEl.style.top = '10%';
infoboxEl.style.right = '10%';
infoboxEl.style.color = 'rgba(255, 0, 0, 1)';
infoboxEl.style.zIndex = '99999'; // ensures that it shows above other elements.
infoboxEl.style.visibility = 'hidden';
infoboxEl.style.marginTop = '3%';
}
if (videoElement.parentElement !== infoboxEl.parentElement)
videoElement.parentElement.appendChild(infoboxEl);
return infoboxEl;
}
// update rate indicator.
function showInfobox(videoElement, rate) {
const infobox = getInfobox(videoElement);
infobox.innerHTML = `${rate}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(videoElement, rate, shouldShowInfobox) {
// grab the video elements and set their playback rate.
if (!videoElement) return;
videoElement.playbackRate = rate;
if (shouldShowInfobox) showInfobox(videoElement, rate);
}
// mimic vlc keyboard shortcuts
function addKeyListener() {
window.addEventListener('keydown', (event) => {
let videoElement, modification = 0;
switch (event.key) {
case keyReduceSpeed:
modification = -1;
break;
case keyIncreaseSpeed:
modification = 1;
break;
case keyResetSpeed:
videoElement = document.getElementsByTagName('video')[0];
setPlaybackRate(videoElement, 1, showValuesOnVideo);
return;
default:
return;
}
videoElement = document.getElementsByTagName('video')[0];
if (!videoElement) return;
const currentPlaybackRate = videoElement.playbackRate;
const speedStep = getVal('speedStep');
const newPlaybackRate = parseFloat((currentPlaybackRate + (speedStep * modification)).toFixed(3));
// console.log(`Raising "playbackRate" from ${currentPlaybackRate} to ${newPlaybackRate}`);
setPlaybackRate(videoElement, newPlaybackRate, showValuesOnVideo);
});
}
function onReady() { addKeyListener(); }
function main() {
init();
GMsetup();
if (document.readyState !== 'loading') {
onReady(); // Or setTimeout(onReady, 0); if you want it consistently async
} else {
document.addEventListener('DOMContentLoaded', onReady);
}
}
main();