Raw Source Toggle Dropdown

• Minified Source

ni554n / Video Speed Control with Keyboard

// ==UserScript==

// @name                Video Speed Control with Keyboard
// @description         Controls any HTML5 video playback speed by pressing shortcut keys. See source code comment for the shortcut keymap.
// @version             3.2

// @namespace           io.github.ni554n
// @include             *

// @updateURL           https://openuserjs.org/meta/ni554n/Video_Speed_Control_with_Keyboard.meta.js
// @supportURL          https://github.com/ni554n/userscripts/issues
// @license             MIT

// @author              Nissan Ahmed
// @homepageURL         https://ni554n.github.io/
// @contributionURL     https://paypal.me/ni554n

// ==/UserScript==

/* Keymap:
 * ┌─────┬───────┐
 * │ Key │ Speed │
 * ├─────┼───────┤
 * │  ,  │ -0.5x │
 * ├─────┼───────┤
 * │  .  │ +0.5x │
 * ├─────┼───────┤
 * │  ;  │   1x  │
 * ├─────┼───────┤
 * │  '  │  2.5x │
 * ├─────┼───────┤
 * │  [  │   2x  │
 * ├─────┼───────┤
 * │  ]  │ 1.75x │
 * └─────┴───────┘
 */
 
 /* Migration Notice */

console.log(`
 █████  ████████ ████████ ███████ ███    ██ ████████ ██  ██████  ███    ██ 
██   ██    ██       ██    ██      ████   ██    ██    ██ ██    ██ ████   ██ 
███████    ██       ██    █████   ██ ██  ██    ██    ██ ██    ██ ██ ██  ██ 
██   ██    ██       ██    ██      ██  ██ ██    ██    ██ ██    ██ ██  ██ ██ 
██   ██    ██       ██    ███████ ██   ████    ██    ██  ██████  ██   ████ 
                                                                           
                                                                           
`)

console.log(
`Thanks for using "Video Speed Control with Keyboard" userscript downloaded from OpenUserJS.

You are seeing this message because due to a change introduced in OpenUserJS,
future updates to this script will no longer be vaiable.

If you like to get updates in the future, please open your userscript manager program,
and remove the "Video Speed Control with Keyboard" script.

Then head over to this Github link and install this script again.
https://github.com/ni554n/userscripts/tree/master/all-website/video-speed-control-with-keyboard#installation

It's very easy to do and will take only 3-4 clicks.

Sorry for the inconvenience!`
);


// Stores currently playing video element reference for changing the speed later.
let video;

// Stores currently selected speed. Also acts as default / initial playback speed for all video.
let speed = 1;

/* The "playing" event always fires automatically at the start of a video but "play" event is not.
 * After using the event for the initial key registration, "play" event is used for capturing the active video reference.
 */
document.addEventListener("playing", registerShortcutKeys, { capture: true, once: true });
document.addEventListener("playing", restoreSpeed, { capture: true });
document.addEventListener("play", captureActiveVideoElement, true);

function registerShortcutKeys(event) {
  captureActiveVideoElement(event);

  document.addEventListener("keydown", handlePressedKey);
}

function restoreSpeed(event) {
  if (event.target.playbackRate !== speed) event.target.playbackRate = speed;
}

function captureActiveVideoElement(event) {
  video = event.target;
  speed = video.playbackRate;
}

function handlePressedKey(event) {
  // If the pressed key is coming from any input field, do nothing.
  const target = event.target;
  if (target.localName === "input" || target.localName === "textarea" || target.isContentEditable) return;

  // Mapping keys with actions.
  const key = event.key;
  if (key === ",") video.playbackRate -= 0.5;
  else if (key === ".") video.playbackRate += 0.5;
  else if (key === ";") video.playbackRate = 1;
  else if (key === "\'") video.playbackRate = 2.5;
  else if (key === "[") video.playbackRate = 2;
  else if (key === "]") video.playbackRate = 1.75;

  // Saving the speed for next resume or video playback.
  speed = video.playbackRate;
}