☰

YouTube Playback Speed with Slider + Hold (Space/Click)

Temporarily boost playback speed by holding Spacebar or Left Mouse Button. Includes speed slider 1x-8x and delay.

  1. // ==UserScript==
  2. // @name         YouTube Playback Speed with Slider + Hold (Space/Click)
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.1
  5. // @description  Temporarily boost playback speed by holding Spacebar or Left Mouse Button. Includes speed slider 1x-8x and delay.
  6. // @match        https://www.youtube.com/*
  7. // @grant        none
  8. // @license MIT
  9. // ==/UserScript==
  10.  
  11. (function () {
  12.     'use strict';
  13.  
  14.     let speed = parseFloat(localStorage.getItem('youtubeSpeed')) || 4.0;
  15.     let normalSpeed = 1.0;
  16.     let spaceHeld = false;
  17.     let mouseHeld = false;
  18.  
  19.     let spaceDelayTimer = null;
  20.     let mouseDelayTimer = null;
  21.  
  22.     function updatePlaybackRate() {
  23.         const video = document.querySelector('video');
  24.         if (video) {
  25.             video.playbackRate = (spaceHeld || mouseHeld) ? speed : normalSpeed;
  26.         }
  27.     }
  28.  
  29.     setInterval(updatePlaybackRate, 100);
  30.  
  31.     document.addEventListener('keydown', (e) => {
  32.         if (e.code === 'Space' && !spaceHeld && !spaceDelayTimer) {
  33.             const active = document.activeElement.tagName.toLowerCase();
  34.             if (active === 'input' || active === 'textarea' || document.activeElement.isContentEditable) return;
  35.  
  36.             // Verzögerung von 300ms bevor Space aktiviert
  37.             spaceDelayTimer = setTimeout(() => {
  38.                 spaceHeld = true;
  39.                 updatePlaybackRate();
  40.             }, 300);
  41.         }
  42.     });
  43.  
  44.     document.addEventListener('keyup', (e) => {
  45.         if (e.code === 'Space') {
  46.             clearTimeout(spaceDelayTimer);
  47.             spaceDelayTimer = null;
  48.             spaceHeld = false;
  49.             updatePlaybackRate();
  50.         }
  51.     });
  52.  
  53.     document.addEventListener('mousedown', (e) => {
  54.         const video = document.querySelector('video');
  55.         if (e.button === 0 && video && video.contains(e.target)) {
  56.             // Verzögerung von 300ms bevor Maushalten aktiviert
  57.             mouseDelayTimer = setTimeout(() => {
  58.                 mouseHeld = true;
  59.                 updatePlaybackRate();
  60.             }, 300);
  61.         }
  62.     });
  63.  
  64.     document.addEventListener('mouseup', (e) => {
  65.         if (e.button === 0) {
  66.             clearTimeout(mouseDelayTimer);
  67.             mouseDelayTimer = null;
  68.             mouseHeld = false;
  69.             updatePlaybackRate();
  70.         }
  71.     });
  72.  
  73.     function createSliderMenu() {
  74.         if (document.getElementById('sliderSpeedContainer')) return;
  75.  
  76.         const videoContainer = document.querySelector('.html5-video-player');
  77.         if (!videoContainer) return;
  78.  
  79.         const container = document.createElement('div');
  80.         container.id = 'sliderSpeedContainer';
  81.         container.style.position = 'absolute';
  82.         container.style.top = '100%';
  83.         container.style.left = '90%';
  84.         container.style.transform = 'translateX(-50%)';
  85.         container.style.display = 'flex';
  86.         container.style.alignItems = 'center';
  87.         container.style.gap = '6px';
  88.         container.style.fontSize = '14px';
  89.         container.style.color = '#fff';
  90.         container.style.background = 'rgba(0, 0, 0, 0)';
  91.         container.style.borderRadius = '5px';
  92.         container.style.padding = '5px';
  93.         container.style.zIndex = '9999';
  94.         container.style.width = '210px';
  95.         container.style.boxSizing = 'border-box';
  96.  
  97.         const label = document.createElement('span');
  98.         label.textContent = 'Speed:';
  99.  
  100.         const slider = document.createElement('input');
  101.         slider.type = 'range';
  102.         slider.min = 1;
  103.         slider.max = 8;
  104.         slider.step = 0.5;
  105.         slider.value = speed;
  106.         slider.style.width = '120px';
  107.         slider.style.margin = '0';
  108.  
  109.         const valueDisplay = document.createElement('span');
  110.         valueDisplay.textContent = `${speed}x`;
  111.  
  112.         slider.addEventListener('input', () => {
  113.             speed = parseFloat(slider.value);
  114.             valueDisplay.textContent = `${speed}x`;
  115.             localStorage.setItem('youtubeSpeed', speed);
  116.         });
  117.  
  118.         container.appendChild(label);
  119.         container.appendChild(slider);
  120.         container.appendChild(valueDisplay);
  121.  
  122.         videoContainer.parentElement.appendChild(container);
  123.     }
  124.  
  125.     const checkInterval = setInterval(() => {
  126.         const video = document.querySelector('video');
  127.         if (video) {
  128.             createSliderMenu();
  129.         }
  130.     }, 1000);
  131. })();