☰

YouTube Playback Speed with a Slider + Spacebar Hold

Change the Playback speed on the slider and Hold Space

目前為 2025-04-17 提交的版本，檢視 最新版本。

// ==UserScript==
// @name         YouTube Playback Speed with a Slider + Spacebar Hold
// @namespace    http://tampermonkey.net/
// @version      1
// @description  Change the Playback speed on the slider and Hold Space
// @author       PurplePanic
// @match        https://www.youtube.com/*
// @license MIT
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    // Lade den zuletzt gespeicherten Speed-Wert aus dem localStorage, falls vorhanden
    let speed = parseFloat(localStorage.getItem('youtubeSpeed')) || 4.0; // Standardwert: 4x
    let normalSpeed = 1.0;
    let spaceHeld = false;

    function updatePlaybackRate() {
        const video = document.querySelector('video');
        if (video) {
            video.playbackRate = spaceHeld ? speed : normalSpeed;
        }
    }

    // Überwacht kontinuierlich die Playback-Rate, um sicherzustellen, dass sie nicht überschrieben wird
    setInterval(updatePlaybackRate, 100); // Alle 100ms wird die Geschwindigkeit überprüft

    document.addEventListener('keydown', (e) => {
        if (e.code === 'Space' && !spaceHeld) {
            const active = document.activeElement.tagName.toLowerCase();
            if (active === 'input' || active === 'textarea' || document.activeElement.isContentEditable) return;
            spaceHeld = true;
            updatePlaybackRate();
        }
    });

    document.addEventListener('keyup', (e) => {
        if (e.code === 'Space') {
            spaceHeld = false;
            updatePlaybackRate();
        }
    });

    function createSliderMenu() {
        if (document.getElementById('sliderSpeedContainer')) return;

        const videoContainer = document.querySelector('.html5-video-player');
        if (!videoContainer) return;

        // Erstelle das Container-Element für den Slider
        const container = document.createElement('div');
        container.id = 'sliderSpeedContainer';
        container.style.position = 'absolute';
        container.style.top = '100%';     // Direkt unter dem Video
        container.style.left = '90%';     // Horizontal mittig
        container.style.transform = 'translateX(-50%)'; // Um die Mitte exakt zu treffen
        container.style.display = 'flex';
        container.style.alignItems = 'center';
        container.style.gap = '6px';
        container.style.fontSize = '14px';
        container.style.color = '#fff';
        container.style.background = 'rgba(0, 0, 0, 0)';
        container.style.borderRadius = '5px';
        container.style.padding = '5px';
        container.style.zIndex = '9999'; // Sicherstellen, dass der Slider immer sichtbar ist
        container.style.width = '210px'; // Feste Breite für das Menü
        container.style.boxSizing = 'border-box'; // Damit der Inhalt nicht überläuft

        const label = document.createElement('span');
        label.textContent = 'Speed:';

        const slider = document.createElement('input');
        slider.type = 'range';
        slider.min = 1;
        slider.max = 8;
        slider.step = 0.5;
        slider.value = speed;
        slider.style.width = '120px'; // Feste Breite für den Slider
        slider.style.margin = '0';

        const valueDisplay = document.createElement('span');
        valueDisplay.textContent = `${speed}x`;

        slider.addEventListener('input', () => {
            speed = parseFloat(slider.value);
            valueDisplay.textContent = `${speed}x`;
            // Speichere den neuen Speed-Wert im localStorage
            localStorage.setItem('youtubeSpeed', speed);
        });

        container.appendChild(label);
        container.appendChild(slider);
        container.appendChild(valueDisplay);

        // Füge den Slider unterhalb des Videos hinzu
        videoContainer.parentElement.appendChild(container);
    }

    // Wiederholt prüfen, ob die Seite fertig geladen ist
    const checkInterval = setInterval(() => {
        const video = document.querySelector('video');
        if (video) {
            createSliderMenu();
        }
    }, 1000);
})();