☰

SpeedeKey: Control HTML5 Video Speed with a Tap

Change HTML5 video playback speed right from your keyboard. ("[" to decrease, "]" to increase, Backspace to reset)

  1. // ==UserScript==
  2. // @name         SpeedeKey: Control HTML5 Video Speed with a Tap
  3. // @author       cemiu
  4. // @license      MIT
  5. // @namespace    https://cemiu.net/
  6. // @homepage     https://gist.github.com/cemiu/db9f64b9d199b75ab218bb7a23b68734
  7. // @homepage     https://cemiu.net/
  8. // @version      1
  9. // @description  Change HTML5 video playback speed right from your keyboard. ("[" to decrease, "]" to increase, Backspace to reset)
  10. // @match        *://*/*
  11. // @grant        none
  12. // @run-at       document-end
  13. // ==/UserScript==
  14.  
  15. (function() {
  16.     'use strict';
  17.  
  18.     // Change keybindings for speed modification
  19.     const KEY_SPEED_DECREASE = '[';       // decrease playback speed by 0.25x
  20.     const KEY_SPEED_INCREASE = ']';       // increase playback speed by 0.25x
  21.     const KEY_SPEED_RESET = 'Backspace';  //    reset backback speed to 1x
  22.   
  23.     const SPEED_INCREMENT = 0.25;
  24.  
  25.     let playbackSpeed = 1.0;
  26.     let displayTimeout;
  27.     let displayVisible = false; // Track if display is visible
  28.  
  29.     // Create a display element for current speed
  30.     const displayElement = document.createElement('div');
  31.     displayElement.style.position = 'fixed';
  32.     displayElement.style.top = '10px';
  33.     displayElement.style.left = '10px';
  34.     displayElement.style.padding = '5px';
  35.     displayElement.style.background = 'rgba(128, 128, 128, 0.9)';
  36.     displayElement.style.color = 'white';
  37.     displayElement.style.zIndex = '9999';
  38.     displayElement.style.fontFamily = 'Arial, sans-serif';
  39.     displayElement.style.transition = 'opacity 0.2s';
  40.     displayElement.style.opacity = '0';
  41.     displayElement.style.fontSize = '14px';
  42.  
  43.     // Append the display element to the body
  44.     document.body.appendChild(displayElement);
  45.  
  46.     // Function to update the display with current speed
  47.     function updateSpeedDisplay() {
  48.         if (displayVisible) {
  49.             displayElement.textContent = `Speed: ${playbackSpeed.toFixed(2)}x`;
  50.             displayElement.style.opacity = '1';
  51.         }
  52.  
  53.         clearTimeout(displayTimeout);
  54.         displayTimeout = setTimeout(() => {
  55.             displayElement.style.opacity = '0';
  56.         }, 600);
  57.     }
  58.  
  59.     // Function to change the playback speed of the video
  60.     function changePlaybackSpeed(speed) {
  61.         playbackSpeed += speed;
  62.         if (playbackSpeed < SPEED_INCREMENT) { // Don't let speed stop to 0x
  63.             playbackSpeed = SPEED_INCREMENT;
  64.         }
  65.         const videos = document.querySelectorAll('video');
  66.         if (videos.length > 0) {
  67.             videos.forEach(video => {
  68.                 video.playbackRate = playbackSpeed;
  69.             });
  70.             displayVisible = true; // Show display if speed changed on a video page
  71.             updateSpeedDisplay();
  72.         }
  73.     }
  74.  
  75.     // Event listener for key presses
  76.     document.addEventListener('keydown', event => {
  77.         if (event.key === KEY_SPEED_DECREASE) {
  78.             changePlaybackSpeed(-SPEED_INCREMENT);
  79.         } else if (event.key === KEY_SPEED_INCREASE) {
  80.             changePlaybackSpeed(SPEED_INCREMENT);
  81.         } else if (event.key === KEY_SPEED_RESET) {
  82.             playbackSpeed = 1.0;
  83.             const videos = document.querySelectorAll('video');
  84.             if (videos.length > 0) {
  85.                 videos.forEach(video => {
  86.                     video.playbackRate = playbackSpeed;
  87.                 });
  88.                 displayVisible = true; // Show display if speed reset on a video page
  89.                 updateSpeedDisplay();
  90.             }
  91.         }
  92.     });
  93.  
  94.     // Initialize the speed display
  95.     updateSpeedDisplay();
  96. })();