☰

YouTube Quick Speed Interface

Modify the YouTube HTML player interface

目前为 2023-05-20 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         YouTube Quick Speed Interface
  3. // @name:en      YouTube Quick Speed Interface
  4. // @namespace    https://twitter.com/CobleeH
  5. // @version      1.0
  6. // @description  Modify the YouTube HTML player interface
  7. // @description:en Modify the YouTube HTML player interface
  8. // @author       Your Name
  9. // @match        https://www.youtube.com/*
  10. // @grant        none
  11. // @license MIT
  12. // ==/UserScript==
  13.  
  14. (function() {
  15.     'use strict';
  16.  
  17.     // Write your script code here
  18.  
  19.     // 添加倍速选项 (Add speed options)
  20.     var rightControls = document.querySelector('.ytp-right-controls');
  21.     var leftControls = document.querySelector('.ytp-left-controls');
  22.     if (rightControls && leftControls) {
  23.         var speedOptions = document.createElement('div');
  24.         speedOptions.style.display = 'flex';
  25.         speedOptions.style.alignItems = 'center';
  26.         speedOptions.style.order = '2'; // 设置为较低的顺序 (Set a lower order)
  27.         speedOptions.style.marginLeft = '10px'; // 向左移动10像素 (Move 10 pixels to the left)
  28.         speedOptions.style.marginRight = '25px'; // 设置右侧边距为10像素 (Set right margin to 10 pixels)
  29.  
  30.         var label = document.createElement('span');
  31.         label.innerText = 'Speed:';
  32.         speedOptions.appendChild(label);
  33.  
  34.         var speeds = [0.5, 1, 1.5, 2];
  35.         speeds.forEach(function(speed) {
  36.             var option = document.createElement('div');
  37.             option.innerText = speed + 'x';
  38.             option.classList.add('ytp-speed-option');
  39.             option.style.cursor = 'pointer';
  40.             option.style.marginLeft = '5px'; // 调整选项之间的间距 (Adjust the spacing between options)
  41.             option.addEventListener('click', function() {
  42.                 var player = document.querySelector('.video-stream');
  43.                 if (player) {
  44.                     player.playbackRate = speed;
  45.                 }
  46.                 highlightOption(option);
  47.             });
  48.  
  49.             option.addEventListener('mouseover', function() {
  50.                 option.classList.add('highlighted');
  51.             });
  52.  
  53.             option.addEventListener('mouseout', function() {
  54.                 if (!option.classList.contains('active')) {
  55.                     option.classList.remove('highlighted');
  56.                 }
  57.             });
  58.  
  59.             speedOptions.appendChild(option);
  60.  
  61.             // 检查当前播放速度，如果与选项匹配，则添加高亮样式 (Check the current playback speed and add highlight style if it matches the option)
  62.             var player = document.querySelector('.video-stream');
  63.             if (player && player.playbackRate === speed) {
  64.                 highlightOption(option);
  65.             }
  66.         });
  67.  
  68.         leftControls.style.order = '1'; // 将左侧控制区域的顺序设置为较高 (Set a higher order for the left control area)
  69.         rightControls.style.order = '3'; // 将右侧控制区域的顺序设置为较高 (Set a higher order for the right control area)
  70.  
  71.         document.querySelector('.ytp-chrome-controls').appendChild(speedOptions);
  72.     }
  73.  
  74.     function highlightOption(option) {
  75.         // 移除其他选项的高亮样式 (Remove highlight style from other options)
  76.         var options = document.querySelectorAll('.ytp-speed-option');
  77.         options.forEach(function(opt) {
  78.             opt.classList.remove('active');
  79.         });
  80.  
  81.         // 添加当前选项的高亮样式 (Add highlight style to the current option)
  82.         option.classList.add('active');
  83.     }
  84.  
  85.     // 添加高亮样式 (Add highlight styles)
  86.     var style = document.createElement('style');
  87.     style.innerHTML = `
  88.         .ytp-speed-option {
  89.             transition: background-color 0.3s;
  90.         }
  91.  
  92.         .ytp-speed-option:hover {
  93.             background-color: rgba(211, 211, 211, 0.4);
  94.         }
  95.  
  96.         .ytp-speed-option.active,
  97.         .ytp-speed-option.active:hover {
  98.             background-color: rgba(211, 211, 211, 0.4);
  99.         }
  100.     `;
  101.     document.head.appendChild(style);
  102. })();
  103.  
  104. /*
  105. ================ Chinese Version =================
  106.  
  107. 在YouTube播放器上添加倍速选项
  108.  
  109. 此脚本将在YouTube HTML播放器界面中添加一个倍速控制功能，允许您使用预定义的倍速选项更改视频的播放速度。
  110.  
  111. 使用说明：
  112. - 安装脚本后，您将在播放器控制栏旁边看到一个“Speed”标签。
  113. - 单击所需的速度选项以更改播放速度。
  114. - 选定的速度选项将突出显示，并在视频播放时应用。
  115.  
  116. 注意：
  117. - 此脚本适用于YouTube的HTML播放器界面。
  118. - 若要使用此脚本，将其粘贴到浏览器的开发者工具控制台或扩展程序中。
  119.  
  120. ================ English Version ================
  121.  
  122. Adding Playback Speed Options to YouTube Player
  123.  
  124. 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.
  125.  
  126. Instructions:
  127. - After installing the script, you will see a "Speed" label next to the player controls.
  128. - Click on the desired speed option to change the playback speed.
  129. - The selected speed option will be highlighted and applied during video playback.
  130.  
  131. Note:
  132. - This script is compatible with YouTube's HTML player interface.
  133. - To use this script, paste it into your browser's developer tools console or extension program.
  134. */