☰

Youtube Video Control with Arrow Keys

Control video volume and seek with arrow keys

目前为 2024-10-17 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Youtube Video Control with Arrow Keys
  3. // @name:ru      Ютуб видео правильная перемотка звука и видео через стрелки
  4. // @namespace    http://tampermonkey.net/
  5. // @version      1.1
  6. // @description  Control video volume and seek with arrow keys
  7. // @description:ru Правильная перемотка видео через стрелки
  8. // @author       Boss of this gym
  9. // @match        *://www.youtube.com/*
  10. // @grant        none
  11. // @license MIT
  12. // ==/UserScript==
  13.  
  14. (function() {
  15.     'use strict';
  16.  
  17.     // Function to find the first video element on the page
  18.     function getVideoElement() {
  19.         return document.querySelector('video');
  20.     }
  21.  
  22.     // Function to change volume
  23.     function changeVolume(video, delta) {
  24.         if (video) {
  25.             video.volume = Math.min(Math.max(video.volume + delta, 0), 1);
  26.         }
  27.     }
  28.  
  29.     // Function to seek video
  30.     function seekVideo(video, time) {
  31.         if (video) {
  32.             video.currentTime = Math.min(Math.max(video.currentTime + time, 0), video.duration);
  33.         }
  34.     }
  35.  
  36.     // Function to check if the active element is an input or textarea
  37.     function isInputElementFocused() {
  38.         const activeElement = document.activeElement;
  39.         if (!activeElement) return false;
  40.  
  41.         const tagName = activeElement.tagName.toUpperCase();
  42.         return tagName === 'INPUT' || tagName === 'TEXTAREA' || activeElement.isContentEditable;
  43.     }
  44.  
  45.     // Add event listener for keydown event
  46.     document.addEventListener('keydown', function(event) {
  47.         const video = getVideoElement();
  48.         if (!video || event.altKey || isInputElementFocused()) return; // Ignore if Alt is pressed or input is focused
  49.  
  50.         if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
  51.             event.preventDefault();
  52.  
  53.             // Make the video element focusable and focus on it
  54.             if (document.activeElement !== video) {
  55.                 video.setAttribute('tabindex', '-1');
  56.                 video.focus();
  57.             }
  58.  
  59.             switch(event.key) {
  60.                 case 'ArrowUp':
  61.                     changeVolume(video, 0.1); // Increase volume
  62.                     break;
  63.                 case 'ArrowDown':
  64.                     changeVolume(video, -0.1); // Decrease volume
  65.                     break;
  66.                 case 'ArrowRight':
  67.                     seekVideo(video, 5); // Seek forward 5 seconds
  68.                     break;
  69.                 case 'ArrowLeft':
  70.                     seekVideo(video, -5); // Seek backward 5 seconds
  71.                     break;
  72.             }
  73.         }
  74.     });
  75.  
  76. })();