Video Speed Control with Keyboard

Controls any HTML5 video playback speed by pressing shortcut keys. See source code comment for the shortcut keymap.

  1. // ==UserScript==
  2.  
  3. // @name Video Speed Control with Keyboard
  4. // @description Controls any HTML5 video playback speed by pressing shortcut keys. See source code comment for the shortcut keymap.
  5. // @version 3.1
  6.  
  7. // @namespace io.github.ni554n
  8. // @include *
  9.  
  10. // @supportURL https://github.com/ni554n/userscripts/issues
  11. // @license MIT
  12.  
  13. // @author Nissan Ahmed
  14. // @homepageURL https://ni554n.github.io/
  15. // @contributionURL https://paypal.me/ni554n
  16.  
  17. // ==/UserScript==
  18.  
  19. /* Keymap:
  20. * ┌─────┬───────┐
  21. * │ Key │ Speed │
  22. * ├─────┼───────┤
  23. * │ , │ -0.5x │
  24. * ├─────┼───────┤
  25. * │ . │ +0.5x │
  26. * ├─────┼───────┤
  27. * │ ; │ 1x │
  28. * ├─────┼───────┤
  29. * │ ' │ 2.5x │
  30. * ├─────┼───────┤
  31. * │ [ │ 2x │
  32. * ├─────┼───────┤
  33. * │ ] │ 1.75x │
  34. * └─────┴───────┘
  35. */
  36.  
  37. // Stores currently playing video element reference for changing the speed later.
  38. let video;
  39.  
  40. // Stores currently selected speed. Also acts as default / initial playback speed for all video.
  41. let speed = 1;
  42.  
  43. /* The "playing" event always fires automatically at the start of a video but "play" event is not.
  44. * After using the event for the initial key registration, "play" event is used for capturing the active video reference.
  45. */
  46. document.addEventListener("playing", registerShortcutKeys, { capture: true, once: true });
  47. document.addEventListener("playing", restoreSpeed, { capture: true });
  48. document.addEventListener("play", captureActiveVideoElement, true);
  49.  
  50. function registerShortcutKeys(event) {
  51. captureActiveVideoElement(event);
  52.  
  53. document.addEventListener("keydown", handlePressedKey);
  54. }
  55.  
  56. function restoreSpeed(event) {
  57. if (event.target.playbackRate !== speed) event.target.playbackRate = speed;
  58. }
  59.  
  60. function captureActiveVideoElement(event) {
  61. video = event.target;
  62. speed = video.playbackRate;
  63. }
  64.  
  65. function handlePressedKey(event) {
  66. // If the pressed key is coming from any input field, do nothing.
  67. const target = event.target;
  68. if (target.localName === "input" || target.localName === "textarea" || target.isContentEditable) return;
  69.  
  70. // Mapping keys with actions.
  71. const key = event.key;
  72. if (key === ",") video.playbackRate -= 0.5;
  73. else if (key === ".") video.playbackRate += 0.5;
  74. else if (key === ";") video.playbackRate = 1;
  75. else if (key === "\'") video.playbackRate = 2.5;
  76. else if (key === "[") video.playbackRate = 2;
  77. else if (key === "]") video.playbackRate = 1.75;
  78.  
  79. // Saving the speed for next resume or video playback.
  80. speed = video.playbackRate;
  81. }

QingJ © 2025

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