☰

HTML5 Video Playback Speed Control Keyboard Shortcut

Add keyboard shortcuts to control HTML5 video playback rate. Available keyboard shortcuts are: <CTRL+[> = Decreate playback rate, <CTRL+]> = Increase playback rate, <CTRL+\> = Set playback rate increment/decrement unit, <CTRL+'> = Set playback to specific rate, <CTRL+;> Reset playback rate to default (to 1.0). Default playback rate incement/decrement is configurable via script.

  1. // ==UserScript==
  2. // @name        HTML5 Video Playback Speed Control Keyboard Shortcut
  3. // @namespace   HTML5VideoPlaybackSpeedControlKeyboardShortcut
  4. // @description Add keyboard shortcuts to control HTML5 video playback rate. Available keyboard shortcuts are: <CTRL+[> = Decreate playback rate, <CTRL+]> = Increase playback rate, <CTRL+\> = Set playback rate increment/decrement unit, <CTRL+'> = Set playback to specific rate, <CTRL+;> Reset playback rate to default (to 1.0). Default playback rate incement/decrement is configurable via script.
  5. // @version     1.2.7
  6. // @license     AGPLv3
  7. // @author      jcunews
  8. // @website     https://greasyfork.org/en/users/85671-jcunews
  9. // @include     http://*/*
  10. // @include     https://*/*
  11. // @grant       none
  12. // ==/UserScript==
  13.  
  14. (function() {
  15.  
  16.   /*
  17.   Notes:
  18.   1. YouTube's video playback speed menu selection will not be affected.
  19.   2. Web browser playback rates: Firefox = 0.25 to 5.0; Chrome = 0.1 to 16.0.
  20.   */
  21.  
  22.   //=== CONFIGURATION BEGIN ===
  23.  
  24.   //Playback rate increment/decrement unit
  25.   var rateUnit    = 0.2;
  26.  
  27.   //Duration (in milliseconds) to display On Screen Display (OSD) when changing playback rate. Set to zero or less to disable.
  28.   var osdTimeout  = 3000;
  29.  
  30.   //=== CONFIGURATION END ===
  31.  
  32.   var eleOSD, osdTimer;
  33.   function showOSD(rate) {
  34.     if (eleOSD) {
  35.       eleOSD.textContent = rate + "X";
  36.     } else {
  37.       eleOSD = document.createElement("DIV");
  38.       eleOSD.style.cssText = "position:fixed;z-index:999999999;right:5px;bottom:5px;margin:0;padding:5px;width:auto;height:auto;font:bold 10pt/normal monospace;background:#444;color:#fff";
  39.       eleOSD.textContent = rate + "X";
  40.       document.body.appendChild(eleOSD);
  41.     }
  42.     clearTimeout(osdTimer);
  43.     osdTimer = setTimeout(function() {
  44.       eleOSD.remove();
  45.       eleOSD = null;
  46.     }, osdTimeout);
  47.   }
  48.  
  49.   addEventListener("keydown", function(ev) {
  50.     var ele = document.querySelector("VIDEO"), rate, inp;
  51.     if (ele && ev.ctrlKey && !ev.shiftKey && !ev.altKey) {
  52.       rate = rate = ele.playbackRate;
  53.       switch (ev.key) {
  54.         case "[":
  55.           rate -= rateUnit;
  56.           if (rate < 0.1) rate = 0.1;
  57.           break;
  58.         case "]":
  59.           rate += rateUnit;
  60.           if (rate > 16) rate = 16;
  61.           break;
  62.         case "\\":
  63.           if ((inp = prompt("Enter playback rate increment/decrement unit.", rateUnit)) === null) return;
  64.           if (isNaN(inp = parseFloat(inp.trim())) || (inp <= 0) || (inp > 4)) {
  65.             alert("Number must be greater than zero, and less or equal to 4.");
  66.             return;
  67.           }
  68.           rateUnit = inp;
  69.           return;
  70.         case "'":
  71.           if ((inp = prompt("Enter playback rate.\n(1.0 = Normal)", rate)) === null) return;
  72.           if (isNaN(inp = parseFloat(inp.trim())) || (inp < 0.1) || (inp > 16)) {
  73.             alert("Number must be between 0.1 to 16 (inclusive).");
  74.             return;
  75.           }
  76.           rate = inp;
  77.           break;
  78.         case ";":
  79.           rate = 1;
  80.           break;
  81.         default:
  82.           return;
  83.       }
  84.       rate = parseFloat(rate.toFixed(2));
  85.       ele.playbackRate = rate;
  86.       if (osdTimeout > 0) showOSD(ele.playbackRate);
  87.     }
  88.   });
  89.  
  90. })();