☰

YouTube Quick Speed Interface

Modify the YouTube HTML player interface

当前为 2023-07-21 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         YouTube Quick Speed Interface
  3. // @name:en      YouTube Quick Speed Interface
  4. // @namespace    https://twitter.com/CobleeH
  5. // @version      1.05
  6. // @description  Modify the YouTube HTML player interface
  7. // @description:en Modify the YouTube HTML player interface
  8. // @author       CobleeH
  9. // @match        https://www.youtube.com/*
  10. // @grant        none
  11. // @license MIT
  12. // ==/UserScript==
  13.  
  14. // @changelog    Version 1.05:
  15. // - Added MutationObserver to dynamically add speed options when the YouTube player container is added to the document.
  16. // - Fixed a bug where duplicate speed adjustment options were created by checking for the existence of the .ytp-speed-options element before adding.
  17.  
  18.  
  19. (function() {
  20.     'use strict';
  21.  
  22.     // Write your script code here
  23.  
  24.     // 添加倍速选项 (Add speed options)
  25.     function addSpeedOptions() {
  26.         // 检查是否已添加倍速选项 (Check if speed options are already added)
  27.         if (document.querySelector('.ytp-speed-options')) {
  28.             return;
  29.         }
  30.  
  31.         var rightControls = document.querySelector('.ytp-right-controls');
  32.         var leftControls = document.querySelector('.ytp-left-controls');
  33.         if (rightControls && leftControls) {
  34.             var speedOptions = document.createElement('div');
  35.             speedOptions.classList.add('ytp-speed-options');
  36.             speedOptions.style.display = 'flex';
  37.             speedOptions.style.alignItems = 'center';
  38.             speedOptions.style.order = '2';
  39.             speedOptions.style.marginLeft = '10px';
  40.             speedOptions.style.marginRight = '25px';
  41.  
  42.             var label = document.createElement('span');
  43.             label.innerText = 'Speed';
  44.             speedOptions.appendChild(label);
  45.  
  46.             var speeds = [0.5, 1, 1.5, 2];
  47.             speeds.forEach(function(speed) {
  48.                 var option = document.createElement('div');
  49.                 option.innerText = speed + 'x';
  50.                 option.classList.add('ytp-speed-option');
  51.                 option.style.cursor = 'pointer';
  52.                 option.style.marginLeft = '5px';
  53.                 option.addEventListener('click', function() {
  54.                     var player = document.querySelector('.video-stream');
  55.                     if (player) {
  56.                         player.playbackRate = speed;
  57.                     }
  58.                     highlightOption(option);
  59.                 });
  60.  
  61.                 option.addEventListener('mouseover', function() {
  62.                     option.classList.add('highlighted');
  63.                 });
  64.  
  65.                 option.addEventListener('mouseout', function() {
  66.                     if (!option.classList.contains('active')) {
  67.                         option.classList.remove('highlighted');
  68.                     }
  69.                 });
  70.  
  71.                 speedOptions.appendChild(option);
  72.  
  73.                 // 检查当前播放速度，如果与选项匹配，则添加高亮样式 (Check current playback speed and add highlight style if it matches the option)
  74.                 var player = document.querySelector('.video-stream');
  75.                 if (player && player.playbackRate === speed) {
  76.                     highlightOption(option);
  77.                 }
  78.             });
  79.  
  80.             leftControls.style.order = '1';
  81.             rightControls.style.order = '3';
  82.  
  83.             document.querySelector('.ytp-chrome-controls').appendChild(speedOptions);
  84.         }
  85.     }
  86.  
  87.     function highlightOption(option) {
  88.         // 移除其他选项的高亮样式 (Remove highlight style from other options)
  89.         var options = document.querySelectorAll('.ytp-speed-option');
  90.         options.forEach(function(opt) {
  91.             opt.classList.remove('active');
  92.         });
  93.  
  94.         // 添加当前选项的高亮样式 (Add highlight style to the current option)
  95.         option.classList.add('active');
  96.     }
  97.  
  98.     // 添加高亮样式 (Add highlight styles)
  99.     var style = document.createElement('style');
  100.     style.innerHTML = `
  101.         .ytp-speed-option {
  102.             transition: background-color 0.3s;
  103.         }
  104.  
  105.         .ytp-speed-option:hover {
  106.             background-color: rgba(211, 211, 211, 0.4);
  107.         }
  108.  
  109.         .ytp-speed-option.active,
  110.         .ytp-speed-option.active:hover {
  111.             background-color: rgba(211, 211, 211, 0.4);
  112.         }
  113.     `;
  114.     document.head.appendChild(style);
  115.  
  116.     // 使用 MutationObserver 监听播放器容器元素的变化 (Use MutationObserver to monitor changes in the player container element)
  117.     var observer = new MutationObserver(function(mutations) {
  118.         mutations.forEach(function(mutation) {
  119.             // 检查是否有新添加的节点 (Check if there are newly added nodes)
  120.             if (mutation.addedNodes) {
  121.                 Array.from(mutation.addedNodes).forEach(function(node) {
  122.                     if (node.classList && node.classList.contains('html5-video-player')) {
  123.                         // 播放器容器元素变化时添加倍速选项 (Add speed options when the player container element changes)
  124.                         addSpeedOptions();
  125.                     }
  126.                 });
  127.             }
  128.         });
  129.     });
  130.  
  131.     // 观察整个文档的变化 (Observe changes in the entire document)
  132.     observer.observe(document.documentElement, { childList: true, subtree: true });
  133.  
  134.     // 页面完全加载后添加倍速选项 (Add speed options when the page is fully loaded)
  135.     addSpeedOptions();
  136. })();
  137.  
  138.  
  139. /*
  140. ================ Chinese Version =================
  141.  
  142. 在YouTube播放器上添加倍速选项
  143.  
  144. 此脚本将在YouTube HTML播放器界面中添加一个倍速控制功能，允许您使用预定义的倍速选项更改视频的播放速度。
  145.  
  146. 使用说明：
  147. - 安装脚本后，您将在播放器控制栏旁边看到一个“Speed”标签。
  148. - 单击所需的速度选项以更改播放速度。
  149. - 选定的速度选项将突出显示，并在视频播放时应用。
  150.  
  151. 注意：
  152. - 此脚本适用于YouTube的HTML播放器界面。
  153.  
  154. ================ English Version ================
  155.  
  156. Adding Playback Speed Options to YouTube Player
  157.  
  158. This script adds a playback speed control feature to the YouTube HTML player interface, allowing you to change the video's playback speed using predefined speed options.
  159.  
  160. Instructions:
  161. - After installing the script, you will see a "Speed" label next to the player controls.
  162. - Click on the desired speed option to change the playback speed.
  163. - The selected speed option will be highlighted and applied during video playback.
  164.  
  165. Note:
  166. - This script is compatible with YouTube's HTML player interface.
  167. */