YouTube Volume Mouse Controller

Control YouTube volume by mouse.

当前为 2018-12-30 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name YouTube Volume Mouse Controller
  3. // @namespace wddd
  4. // @version 1.1.0
  5. // @author wddd
  6. // @license MIT
  7. // @description Control YouTube volume by mouse.
  8. // @homepage https://github.com/wdwind/YouTubeVolumeMouseController
  9. // @match *://www.youtube.com/*
  10. // @require https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js
  11. // @grant GM_addStyle
  12. // @noframes
  13. // ==/UserScript==
  14.  
  15. function run() {
  16. "use strict";
  17.  
  18. var player = $("video");
  19. var timer = 0;
  20.  
  21. // detect available wheel event
  22. var support = "onwheel" in document.createElement("div") ? "wheel" : // Modern browsers support "wheel"
  23. document.onmousewheel !== undefined ? "mousewheel" : // Webkit and IE support at least "mousewheel"
  24. "DOMMouseScroll"; // let"s assume that remaining browsers are older Firefox
  25.  
  26. player.bind(support, function(event) {
  27. var originalEvent = event.originalEvent;
  28. var volume = player[0].volume;
  29. var volumeDelta = 0.05;
  30. var deltaY = 0;
  31.  
  32. if (support == "mousewheel") {
  33. deltaY = originalEvent.wheelDelta;
  34. } else {
  35. deltaY = originalEvent.deltaY || originalEvent.detail;
  36. }
  37.  
  38. volume += (deltaY > 0 ? -volumeDelta : volumeDelta);
  39. player[0].volume = Math.max(0, Math.min(1, volume));
  40.  
  41. $(".ytp-volume-panel").attr("aria-valuenow", (player[0].volume * 100).toFixed(0));
  42. $(".ytp-volume-slider-handle").css("left", ((player[0].volume * 100) * 0.4) + "px");
  43.  
  44. showSlider();
  45.  
  46. // Prevent the page to scroll
  47. return false;
  48. });
  49.  
  50. function showSlider() {
  51. if (timer) {
  52. clearTimeout(timer);
  53. }
  54.  
  55. var sliderBar = $("div#sliderBar");
  56. if (!sliderBar[0]) {
  57. $("body").append("<div id=\"sliderBar\"></div>");
  58. GM_addStyle([
  59. "#sliderBar {width: 100%;",
  60. "height: 20px;",
  61. "position: fixed;",
  62. "top: 63px;",
  63. "z-index: 9999;",
  64. "text-align: center;",
  65. "color: #fff;",
  66. "font-size: initial;",
  67. "opacity: 0.9;",
  68. "background-color: rgba(0,0,0,0.2);}",
  69. ].join(" "));
  70. sliderBar = $("div#sliderBar");
  71. }
  72.  
  73. sliderBar.fadeIn(100);
  74. timer = setTimeout(function() {
  75. sliderBar.fadeOut(700);
  76. }, 1000);
  77.  
  78. sliderBar.html("Volume: " + (player[0].volume * 100).toFixed(0));
  79. }
  80. }
  81.  
  82. /**
  83. * YouTube use Javascript to navigate between pages. So the script will not work:
  84. * 1. If the script only includes/matches the sub pages (like the video page www.youtube.com/watch?v=...)
  85. * 2. And the user navigates to the sub page from a page which is not included/matched by the script
  86. *
  87. * In the above scenario, the script will not be executed.
  88. *
  89. * To run the script in all cases,
  90. * 1. Include/match the whole YouTube host
  91. * 2. Detect Javascript events, and run the script appropriately
  92. *
  93. * Details:
  94. * * https://stackoverflow.com/questions/32275387/recall-tampermonkey-script-when-page-location-changes/32277150#32277150
  95. * * https://stackoverflow.com/questions/34077641/how-to-detect-page-navigation-on-youtube-and-modify-html-before-page-is-rendered
  96. * * https://github.com/1c7/Youtube-Auto-Subtitle-Download/blob/master/Youtube-Subtitle-Downloader/Tampermonkey.js#L122-L152
  97. */
  98.  
  99. // trigger when loading new material design page
  100. var body = document.getElementsByTagName("body")[0];
  101. body.addEventListener("yt-navigate-finish", function() {
  102. if (window.location.href.includes("/watch?v=")) {
  103. run();
  104. }
  105. });
  106.  
  107. // trigger when loading old page
  108. window.addEventListener("spfdone", function() {
  109. if (window.location.href.includes("/watch?v=")) {
  110. run();
  111. }
  112. });

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址