☰

Youtube Volume Scroll with Volume Percentage Only

Control volume on YouTube, synchronize the volume slider, and display only the volume percentage inside the video player.

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

  1. // ==UserScript==
  2. // @name         Youtube Volume Scroll with Volume Percentage Only
  3. // @namespace    https://example.com/
  4. // @version      1.9
  5. // @description  Control volume on YouTube, synchronize the volume slider, and display only the volume percentage inside the video player.
  6. // @author       Shadynasty
  7. // @match        https://www.youtube.com/*
  8. // @match        https://music.youtube.com/*
  9. // @match        https://www.youtube-nocookie.com/embed/*
  10. // @grant        none
  11.  // @license MIT
  12. // ==/UserScript==
  13.  
  14. (function () {
  15.     'use strict';
  16.  
  17.     // Block "Are you still there?" popup
  18.     setInterval(() => (window._lact = Date.now()), 9e5);
  19.  
  20.     let observer, volumeDisplay;
  21.  
  22.     // Function to initialize everything
  23.     function initialize() {
  24.         console.log('Initializing script...');
  25.  
  26.         if (observer) observer.disconnect();
  27.  
  28.         observer = new MutationObserver(() => {
  29.             const video = document.querySelector('video');
  30.             if (video && !video.dataset.volumeScroll) {
  31.                 video.dataset.volumeScroll = "true"; // Mark video as handled
  32.                 attachVolumeControl(video);
  33.                 createVolumeDisplay(video);
  34.             }
  35.         });
  36.  
  37.         observer.observe(document.body, {
  38.             childList: true,
  39.             subtree: true,
  40.         });
  41.  
  42.         const video = document.querySelector('video');
  43.         if (video && !video.dataset.volumeScroll) {
  44.             video.dataset.volumeScroll = "true";
  45.             attachVolumeControl(video);
  46.             createVolumeDisplay(video);
  47.         }
  48.     }
  49.  
  50.     // Create the volume display element inside the video
  51.     function createVolumeDisplay(video) {
  52.         if (volumeDisplay) return; // Avoid duplicating the display
  53.  
  54.         volumeDisplay = document.createElement('div');
  55.         volumeDisplay.style.position = 'absolute';
  56.         volumeDisplay.style.top = '10px';
  57.         volumeDisplay.style.left = '50%';
  58.         volumeDisplay.style.transform = 'translateX(-50%)';
  59.         volumeDisplay.style.background = 'rgba(0, 0, 0, 0.7)';
  60.         volumeDisplay.style.color = 'white';
  61.         volumeDisplay.style.padding = '10px 20px';
  62.         volumeDisplay.style.borderRadius = '5px';
  63.         volumeDisplay.style.fontSize = '20px';
  64.         volumeDisplay.style.fontFamily = 'Arial, sans-serif';
  65.         volumeDisplay.style.zIndex = '9999';
  66.         volumeDisplay.style.display = 'none';
  67.  
  68.         video.parentElement.style.position = 'relative'; // Ensure parent has position for absolute positioning
  69.         video.parentElement.appendChild(volumeDisplay);
  70.     }
  71.  
  72.     function showVolumeDisplay(volume) {
  73.         if (!volumeDisplay) return;
  74.  
  75.         volumeDisplay.textContent = `${volume}%`;
  76.         volumeDisplay.style.display = 'block';
  77.  
  78.         clearTimeout(volumeDisplay._hideTimeout);
  79.         volumeDisplay._hideTimeout = setTimeout(() => {
  80.             volumeDisplay.style.display = 'none';
  81.         }, 1000);
  82.     }
  83.  
  84.     function attachVolumeControl(video) {
  85.         video.addEventListener(
  86.             'wheel',
  87.             (event) => {
  88.                 if (event.ctrlKey || event.altKey) return;
  89.  
  90.                 event.preventDefault();
  91.  
  92.                 const player = document.querySelector('#movie_player') || document.querySelector('.html5-video-player');
  93.                 if (!player) return;
  94.  
  95.                 let currentVolume = player.getVolume ? player.getVolume() : 100;
  96.  
  97.                 const newVolume = Math.min(
  98.                     100,
  99.                     Math.max(0, currentVolume + (event.deltaY < 0 ? 5 : -5))
  100.                 );
  101.  
  102.                 if (player.setVolume) {
  103.                     player.setVolume(newVolume);
  104.                 }
  105.  
  106.                 showVolumeDisplay(newVolume);
  107.  
  108.                 console.log(`Volume set to: ${newVolume}%`);
  109.             },
  110.             { passive: false }
  111.         );
  112.         console.log('Volume scroll enabled for video element.');
  113.     }
  114.  
  115.     // Reinitialize script on visibility change
  116.     window.addEventListener('visibilitychange', () => {
  117.         if (document.visibilityState === 'visible') {
  118.             console.log('Tab reactivated, reinitializing script...');
  119.             initialize();
  120.         }
  121.     });
  122.  
  123.     // Initialize on script load
  124.     initialize();
  125.  
  126.     console.log('Youtube Volume Scroll with Volume Percentage Only script loaded!');
  127. })();