Youtube Video Control with Arrow Keys

Control video volume and seek with arrow keys
目前为 2024-11-18 提交的版本。查看最新版本。
Wrap lines
// ==UserScript==
// @name         Youtube Video Control with Arrow Keys
// @name:ru      Ютуб видео правильная перемотка звука и видео через стрелки
// @namespace    http://tampermonkey.net/
// @version      1.3
// @description  Control video volume and seek with arrow keys
// @description:ru Правильная перемотка видео через стрелки
// @author       Boss of this gym
// @match        *://www.youtube.com/*
// @grant        none
// @license MIT
// ==/UserScript==

(function() {
    'use strict';

    // Function to find the first video element on the page
    function getVideoElement() {
        return document.querySelector('video');
    }

    // Function to change volume
    function changeVolume(video, delta) {
        if (video) {
            video.volume = Math.min(Math.max(video.volume + delta, 0), 1);
        }
    }

    // Function to seek video
    function seekVideo(video, time) {
        if (video) {
            video.currentTime = Math.min(Math.max(video.currentTime + time, 0), video.duration);
        }
    }

    // Function to check if the active element is an input or textarea
    function isInputElementFocused() {
        const activeElement = document.activeElement;
        if (!activeElement) return false;

        const tagName = activeElement.tagName.toUpperCase();
        return tagName === 'INPUT' || tagName === 'TEXTAREA' || activeElement.isContentEditable;
    }

    // Add event listener for keydown event
    document.addEventListener('keydown', function(event) {
        const video = getVideoElement();
        if (!video || event.altKey || isInputElementFocused()) return; // Ignore if Alt is pressed or input is focused

        if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
            event.preventDefault();

            // Make the video element focusable and focus on it
            if (document.activeElement !== video) {
                video.setAttribute('tabindex', '-1');
                video.focus();
            }

            switch(event.key) {
                case 'ArrowUp':
                    changeVolume(video, 0.1); // Increase volume
                    break;
                case 'ArrowDown':
                    changeVolume(video, -0.1); // Decrease volume
                    break;
                case 'ArrowRight':
                    seekVideo(video, 0); // Seek forward 5 seconds
                    break;
                case 'ArrowLeft':
                    seekVideo(video, 0); // Seek backward 5 seconds
                    break;
            }
        }
    });

})();
欢迎访问Greasy Fork镜像
