☰

影片音量/撥放速度控制器

使用滑鼠滾輪和按鍵組合調整影片播放速度和音量，並在影片框架內顯示即時值提示框。僅在條件下阻止滾動。（此腳本由ChatGPT協助撰寫）

  1. // ==UserScript==
  2. // @name         Video Volume/Playback Speed Controller
  3. // @name:zh-TW   影片音量/撥放速度控制器
  4. // @namespace    https://github.com/jmsch23280866
  5. // @version      1.0
  6. // @description  Adjust video playback speed and volume with HUD showing real-time values inside the video frame. Conditional scroll blocking applied. (Script assisted by ChatGPT)
  7. // @description:zh-TW 使用滑鼠滾輪和按鍵組合調整影片播放速度和音量，並在影片框架內顯示即時值提示框。僅在條件下阻止滾動。（此腳本由ChatGPT協助撰寫）
  8. // @author       特務E04
  9. // @supportURL   https://github.com/jmsch23280866/Video-Control-Enhancer/issues
  10. // @license      MIT
  11. // @match        *://*/*
  12. // @grant        none
  13. // ==/UserScript==
  14.  
  15. (function () {
  16.     'use strict';
  17.  
  18.     let hudTimeout; // 用於控制提示框消失的計時器
  19.     let hud; // HUD 提示框元素
  20.  
  21.     function createHUD() {
  22.         hud = document.createElement('div');
  23.         hud.style.position = 'absolute';
  24.         hud.style.padding = '10px 20px';
  25.         hud.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
  26.         hud.style.color = 'white';
  27.         hud.style.fontSize = '16px';
  28.         hud.style.fontWeight = 'bold';
  29.         hud.style.borderRadius = '5px';
  30.         hud.style.pointerEvents = 'none'; // 防止干擾滑鼠事件
  31.         hud.style.zIndex = '9999';
  32.         hud.style.display = 'none';
  33.         return hud;
  34.     }
  35.  
  36.     function showHUD(video, message) {
  37.         if (!hud) hud = createHUD();
  38.  
  39.         // 將 HUD 添加到影片框架中
  40.         if (!video.parentElement.contains(hud)) {
  41.             video.parentElement.appendChild(hud);
  42.         }
  43.  
  44.         // 設置 HUD 位置與內容
  45.         hud.textContent = message;
  46.         hud.style.left = `${(video.clientWidth - hud.offsetWidth) / 2}px`;
  47.         hud.style.top = `${(video.clientHeight - hud.offsetHeight) / 2}px`;
  48.         hud.style.display = 'block';
  49.  
  50.         // 自動隱藏
  51.         clearTimeout(hudTimeout);
  52.         hudTimeout = setTimeout(() => {
  53.             hud.style.display = 'none';
  54.         }, 1000); // 1 秒後自動隱藏
  55.     }
  56.  
  57.     document.addEventListener('wheel', (event) => {
  58.         const video = event.target.closest('video');
  59.         if (!video) return;
  60.  
  61.         // 僅當按下 Ctrl 或右鍵時阻止滾動
  62.         if (!event.ctrlKey && event.buttons !== 2) {
  63.             return;
  64.         }
  65.  
  66.         // 阻止網頁滾動與縮放
  67.         event.preventDefault();
  68.  
  69.         // 滾動方向反轉
  70.         const deltaY = -event.deltaY;
  71.  
  72.         // Ctrl + 滾輪：調整播放速度
  73.         if (event.ctrlKey) {
  74.             const delta = Math.sign(deltaY) * 0.1; // 每次增減 0.1 倍速
  75.             const newPlaybackRate = Math.max(0.1, Math.min(video.playbackRate + delta, 16)); // 限制範圍 0.1 到 16
  76.             video.playbackRate = newPlaybackRate;
  77.             showHUD(video, `播放速度：${newPlaybackRate.toFixed(1)}x`);
  78.         }
  79.  
  80.         // 右鍵 + 滾輪：調整音量
  81.         if (event.buttons === 2) { // 右鍵
  82.             const delta = Math.sign(deltaY) * 0.05; // 每次增減 0.05 音量
  83.             const newVolume = Math.max(0, Math.min(video.volume + delta, 1)); // 限制範圍 0 到 1
  84.             video.volume = newVolume;
  85.             showHUD(video, `音量：${Math.round(newVolume * 100)}%`);
  86.         }
  87.     }, { passive: false }); // 設定 { passive: false } 以確保可以攔截預設行為
  88. })();