☰

YouTube - Display current volume

显示变化时的音量。

目前为 2024-02-11 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name               YouTube - Display current volume
  3. // @namespace          https://gist.github.com/4lrick/7a069ce704be9ac95f00d8fb9c2c9bb2
  4. // @version            1.2
  5. // @description        Displays the volume when it's changing.
  6. // @description:fr     Affiche le volume lorsqu'il change.
  7. // @description:es     Muestra el volumen cuando está cambiando.
  8. // @description:de     Geeft het volume weer als het verandert.
  9. // @description:it     Visualizza il volume quando sta cambiando.
  10. // @description:zh-CN  显示变化时的音量。
  11. // @author             4lrick
  12. // @match              https://www.youtube.com/*
  13. // @icon               https://www.google.com/s2/favicons?sz=64&domain=youtube.com
  14. // @grant              none
  15. // @license            GPL-3.0-only
  16. // ==/UserScript==
  17.  
  18. (function() {
  19.     'use strict';
  20.  
  21.     let volumeDisplayTimeout;
  22.  
  23.     function displayVolume() {
  24.         const player = document.querySelector('#movie_player');
  25.         const volume = player.getVolume();
  26.         let volumeDisplay = document.querySelector('#ytp-video-volume');
  27.  
  28.         if (!volumeDisplay) {
  29.             const playerContainer = document.querySelector('.html5-video-player');
  30.             if (playerContainer) {
  31.                 volumeDisplay = document.createElement('div');
  32.                 volumeDisplay.id = 'ytp-video-volume';
  33.                 volumeDisplay.style.position = 'absolute';
  34.                 volumeDisplay.style.top = '10%';
  35.                 volumeDisplay.style.left = '50%';
  36.                 volumeDisplay.style.translate = '-50%';
  37.                 volumeDisplay.style.textAlign = 'center';
  38.                 volumeDisplay.style.background = 'rgba(0,0,0,.5)';
  39.                 volumeDisplay.style.color = '#eee';
  40.                 volumeDisplay.style.fontSize = '175%';
  41.                 volumeDisplay.style.zIndex = '19';
  42.                 volumeDisplay.style.padding = '10px 20px';
  43.                 volumeDisplay.style.borderRadius = '3%';
  44.                 playerContainer.appendChild(volumeDisplay);
  45.             }
  46.         }
  47.         volumeDisplay.textContent = `${volume}%`;
  48.         volumeDisplay.style.display = 'block';
  49.         clearTimeout(volumeDisplayTimeout);
  50.         volumeDisplayTimeout = setTimeout(() => {
  51.             volumeDisplay.style.display = 'none';
  52.         }, 1000);
  53.     }
  54.  
  55.     function checkVideoExists() {
  56.         const videoElement = document.querySelector('video');
  57.         if (videoElement) {
  58.             videoElement.addEventListener('volumechange', displayVolume);
  59.         }
  60.     }
  61.  
  62.     const observer = new MutationObserver(checkVideoExists);
  63.     const body = document.body;
  64.     const config = { childList: true, subtree: true };
  65.     observer.observe(body, config);
  66. })();