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. */