SpeedControl.user.js

SpeedControl.user.js

// ==UserScript==
// @name         HTML5 Video Player Speed Control
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Control the playback speed of HTML5 video players with keyboard shortcuts.
// @author       cs
// @match        *://*/*
// @icon         https://logos-download.com/wp-content/uploads/2017/07/HTML5_logo.png
// @grant        none
// @license      MIT
// ==/UserScript==

// forked from https://greasyfork.org/en/scripts/494967-html5-video-player-speed-control

// @ts-check

(async function script() {
    'use strict';
    /** @type HTMLVideoElement? */
    let video = null;
    function checkForVideo() {
        const startingVideo = video;
        // Get the video element
        const videos = Array.from(document.querySelectorAll('video'));
        const fullscreenVid = videos.filter(v => v === document.fullscreenElement)[0];
        if (fullscreenVid != undefined) {
            video = fullscreenVid;
            console.info('Using fullscreen video element');
        } else {
            video = videos[videos.length -1];

        }

        // Update the speed indicator position initially
        if (video && video !== startingVideo) {
            // Append the speed indicator element to the video container
            const videoContainer = video.parentElement;
            if (videoContainer) {
                videoContainer.style.position = 'relative';
                videoContainer.appendChild(speedIndicator);
                flashSpeedIndicator();
            }
        }
    }
    setInterval(checkForVideo, 2000);
    

    // Set the initial playback rate
    let playbackRate = 1.0;
    let previousPlaybackRate = 1.0;

    let userWantsSpeedVisible = false;
    // Create a speed indicator element
    const speedIndicator = document.createElement('div');
    speedIndicator.style.position = 'absolute';
    speedIndicator.style.top = '10px';
    speedIndicator.style.left = '10px';
    speedIndicator.style.height = 'fit-content';
    speedIndicator.style.width = 'fit-content';
    speedIndicator.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
    speedIndicator.style.color = '#fff';
    speedIndicator.style.padding = '5px';
    speedIndicator.style.fontFamily = 'Arial, sans-serif';
    speedIndicator.style.fontSize = '12px';
    speedIndicator.style.zIndex = '9999';
    setSpeedVisibility(userWantsSpeedVisible);

    // Function to update the speed indicator
    function updateSpeedIndicator() {
        speedIndicator.textContent = `Speed: ${playbackRate.toFixed(1)}x`;
        flashSpeedIndicator();
    }

    // Function to update the speed indicator position
    function updateSpeedIndicatorPosition() {
        if (!video) return;
        if (video.offsetWidth === window.innerWidth && video.offsetHeight === window.innerHeight) {
            // Video is in fullscreen
            speedIndicator.style.position = 'fixed';
        } else {
            // Video is not in fullscreen
            speedIndicator.style.position = 'absolute';
        }
    }

    // Update the speed indicator position whenever the window is resized
    window.addEventListener('resize', updateSpeedIndicatorPosition);

    /** @param {number} speed */
    function setSpeed(speed) {
        playbackRate = speed;
        if (video) video.playbackRate = playbackRate;
        updateSpeedIndicator();
    }

    // Function to reset the playback rate to normal
    function resetSpeed(speed = 1) {
        if (playbackRate !== speed) {
            previousPlaybackRate = playbackRate;
            setSpeed(speed);
        } else {
            setSpeed(previousPlaybackRate);
        }
    }

    /** @param {boolean} isVisible */
    function setSpeedVisibility(isVisible) {
        speedIndicator.style.display = isVisible ? 'block' : 'none';
    }

    let flashHandle;
    function flashSpeedIndicator() {
        speedIndicator.style.display = 'block';
        clearTimeout(flashHandle);
        flashHandle = setTimeout(
            () => setSpeedVisibility(userWantsSpeedVisible), 2000);
    }

    // Update the speed indicator with the initial playback rate
    updateSpeedIndicator();

    // Event listener for key presses
    document.addEventListener('keydown', (event) => {
        if (event.key === 'd') {
            setSpeed(playbackRate + 0.1)
        } else if (event.key === 's') {
            setSpeed(playbackRate - 0.1)
        } else if (event.key === 'g') {
            setSpeed(1.5);
        } else if (event.key === 'h') {
            setSpeed(1.8);
        } else if (event.key === 'r') {
            resetSpeed();
        } else if (event.key === 'c') {
            resetSpeed(5);
        } else if (event.key === 'v') {
            userWantsSpeedVisible = !userWantsSpeedVisible
            setSpeedVisibility(userWantsSpeedVisible);
        }
    });
})();