☰

YouTube Playback Speed with a Slider + Spacebar Hold

Change the Playback speed on the slider and Hold Space

当前为 2025-04-17 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         YouTube Playback Speed with a Slider + Spacebar Hold
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1
  5. // @description  Change the Playback speed on the slider and Hold Space
  6. // @author       PurplePanic
  7. // @match        https://www.youtube.com/*
  8. // @license MIT
  9. // @grant        none
  10. // ==/UserScript==
  11.  
  12. (function () {
  13.     'use strict';
  14.  
  15.     // Lade den zuletzt gespeicherten Speed-Wert aus dem localStorage, falls vorhanden
  16.     let speed = parseFloat(localStorage.getItem('youtubeSpeed')) || 4.0; // Standardwert: 4x
  17.     let normalSpeed = 1.0;
  18.     let spaceHeld = false;
  19.  
  20.     function updatePlaybackRate() {
  21.         const video = document.querySelector('video');
  22.         if (video) {
  23.             video.playbackRate = spaceHeld ? speed : normalSpeed;
  24.         }
  25.     }
  26.  
  27.     // Überwacht kontinuierlich die Playback-Rate, um sicherzustellen, dass sie nicht überschrieben wird
  28.     setInterval(updatePlaybackRate, 100); // Alle 100ms wird die Geschwindigkeit überprüft
  29.  
  30.     document.addEventListener('keydown', (e) => {
  31.         if (e.code === 'Space' && !spaceHeld) {
  32.             const active = document.activeElement.tagName.toLowerCase();
  33.             if (active === 'input' || active === 'textarea' || document.activeElement.isContentEditable) return;
  34.             spaceHeld = true;
  35.             updatePlaybackRate();
  36.         }
  37.     });
  38.  
  39.     document.addEventListener('keyup', (e) => {
  40.         if (e.code === 'Space') {
  41.             spaceHeld = false;
  42.             updatePlaybackRate();
  43.         }
  44.     });
  45.  
  46.     function createSliderMenu() {
  47.         if (document.getElementById('sliderSpeedContainer')) return;
  48.  
  49.         const videoContainer = document.querySelector('.html5-video-player');
  50.         if (!videoContainer) return;
  51.  
  52.         // Erstelle das Container-Element für den Slider
  53.         const container = document.createElement('div');
  54.         container.id = 'sliderSpeedContainer';
  55.         container.style.position = 'absolute';
  56.         container.style.top = '100%';     // Direkt unter dem Video
  57.         container.style.left = '90%';     // Horizontal mittig
  58.         container.style.transform = 'translateX(-50%)'; // Um die Mitte exakt zu treffen
  59.         container.style.display = 'flex';
  60.         container.style.alignItems = 'center';
  61.         container.style.gap = '6px';
  62.         container.style.fontSize = '14px';
  63.         container.style.color = '#fff';
  64.         container.style.background = 'rgba(0, 0, 0, 0)';
  65.         container.style.borderRadius = '5px';
  66.         container.style.padding = '5px';
  67.         container.style.zIndex = '9999'; // Sicherstellen, dass der Slider immer sichtbar ist
  68.         container.style.width = '210px'; // Feste Breite für das Menü
  69.         container.style.boxSizing = 'border-box'; // Damit der Inhalt nicht überläuft
  70.  
  71.         const label = document.createElement('span');
  72.         label.textContent = 'Speed:';
  73.  
  74.         const slider = document.createElement('input');
  75.         slider.type = 'range';
  76.         slider.min = 1;
  77.         slider.max = 8;
  78.         slider.step = 0.5;
  79.         slider.value = speed;
  80.         slider.style.width = '120px'; // Feste Breite für den Slider
  81.         slider.style.margin = '0';
  82.  
  83.         const valueDisplay = document.createElement('span');
  84.         valueDisplay.textContent = `${speed}x`;
  85.  
  86.         slider.addEventListener('input', () => {
  87.             speed = parseFloat(slider.value);
  88.             valueDisplay.textContent = `${speed}x`;
  89.             // Speichere den neuen Speed-Wert im localStorage
  90.             localStorage.setItem('youtubeSpeed', speed);
  91.         });
  92.  
  93.         container.appendChild(label);
  94.         container.appendChild(slider);
  95.         container.appendChild(valueDisplay);
  96.  
  97.         // Füge den Slider unterhalb des Videos hinzu
  98.         videoContainer.parentElement.appendChild(container);
  99.     }
  100.  
  101.     // Wiederholt prüfen, ob die Seite fertig geladen ist
  102.     const checkInterval = setInterval(() => {
  103.         const video = document.querySelector('video');
  104.         if (video) {
  105.             createSliderMenu();
  106.         }
  107.     }, 1000);
  108. })();