☰

Control YouTube videos correctly using arrow keys

Control video volume and seek with arrow keys

当前为 2024-08-19 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Control YouTube videos correctly using arrow keys
  3. // @name:ru      Правильное управление видео на YouTube с помощью клавиш со стрелками
  4. // @namespace    http://tampermonkey.net/
  5. // @license      MIT
  6. // @version      1
  7. // @description  Control video volume and seek with arrow keys
  8. // @description:ru Управляйте громкостью видео и поиском с помощью клавиш со стрелками
  9. // @author       Boss of this gym
  10. // @match        www.youtube.com/*
  11. // @grant        none
  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 inside a YouTube comment or search form
  37.     function isElementInYouTubeCommentOrSearch(target) {
  38.         if (!target) return false;
  39.  
  40.         const isInput = target.tagName === 'INPUT' || target.tagName === 'TEXTAREA';
  41.         const isSearchBox = isInput && target.closest('form') && target.closest('form').id === 'search-form';
  42.         const isCommentBox = target.closest('ytd-commentbox') !== null;
  43.         const isCommentReplyButton = target.closest('ytd-comment-replies-renderer') !== null;
  44.         const isCommentActionButton = target.closest('ytd-comment-action-buttons-renderer') !== null;
  45.  
  46.         return isSearchBox || isCommentBox || isCommentReplyButton || isCommentActionButton;
  47.     }
  48.  
  49.     // Add event listener for keydown event
  50.     document.addEventListener('keydown', function(event) {
  51.         const video = getVideoElement();
  52.         if (!video || event.altKey) return; // Ignore event if Alt key is pressed
  53.  
  54.         // Check if the focused element is part of YouTube comments or search
  55.         if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key) && !isElementInYouTubeCommentOrSearch(document.activeElement)) {
  56.             event.preventDefault();
  57.  
  58.             // Force focus on the video element
  59.             video.focus();
  60.  
  61.             switch(event.key) {
  62.                 case 'ArrowUp':
  63.                     changeVolume(video, 0.1); // Increase volume
  64.                     break;
  65.                 case 'ArrowDown':
  66.                     changeVolume(video, -0.1); // Decrease volume
  67.                     break;
  68.                 case 'ArrowRight':
  69.                     seekVideo(video, 5); // Seek forward 5 seconds
  70.                     break;
  71.                 case 'ArrowLeft':
  72.                     seekVideo(video, -5); // Seek backward 5 seconds
  73.                     break;
  74.             }
  75.         }
  76.     });
  77.  
  78.     // Set the video element to be focusable
  79.     document.addEventListener('DOMContentLoaded', (event) => {
  80.         const video = getVideoElement();
  81.         if (video) {
  82.             video.setAttribute('tabindex', '-1');
  83.         }
  84.     });
  85.  
  86. })();