YouTube Volume Mouse Controller

Control YouTube volume by mouse.

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

  1. // ==UserScript==
  2. // @name YouTube Volume Mouse Controller
  3. // @namespace wddd
  4. // @version 1.0.0
  5. // @author wddd
  6. // @description Control YouTube volume by mouse.
  7. // @homepage https://github.com/wdwind/YouTubeVolumeMouseController
  8. // @include https://www.youtube.com/watch?v=*
  9. // @require https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js
  10. // @run-at document-end
  11. // @grant GM_addStyle
  12. // @noframes
  13. // ==/UserScript==
  14.  
  15. (function () {
  16. "use strict";
  17. var player = $("video");
  18. var timer = 0;
  19.  
  20. // detect available wheel event
  21. var support = "onwheel" in document.createElement("div") ? "wheel" : // Modern browsers support "wheel"
  22. document.onmousewheel !== undefined ? "mousewheel" : // Webkit and IE support at least "mousewheel"
  23. "DOMMouseScroll"; // let"s assume that remaining browsers are older Firefox
  24.  
  25. player.bind(support, function(event) {
  26. var originalEvent = event.originalEvent;
  27. var volume = player[0].volume;
  28. var volumeDelta = 0.05;
  29. var deltaY = 0;
  30. if (support == "mousewheel") {
  31. deltaY = originalEvent.wheelDelta;
  32. } else {
  33. deltaY = originalEvent.deltaY || originalEvent.detail;
  34. }
  35.  
  36. volume += (deltaY > 0 ? -volumeDelta : volumeDelta);
  37. player[0].volume = Math.max(0, Math.min(1, volume));
  38.  
  39. $(".ytp-volume-panel").attr("aria-valuenow", (player[0].volume * 100).toFixed(0));
  40. $(".ytp-volume-slider-handle").css("left", ((player[0].volume * 100) * 0.4) + "px");
  41.  
  42. showSlider();
  43. // Prevent the page to scroll
  44. return false;
  45. });
  46.  
  47. function showSlider() {
  48. if (timer) {
  49. clearTimeout(timer);
  50. }
  51.  
  52. var sliderBar = $("div#sliderBar");
  53. if (!sliderBar[0]) {
  54. $("body").append('<div id="sliderBar"></div>');
  55. GM_addStyle([
  56. "#sliderBar {width: 100%;",
  57. "height: 20px;",
  58. "position: fixed;",
  59. "top: 63px;",
  60. "z-index: 9999;",
  61. "text-align: center;",
  62. "color: #fff;",
  63. "font-size: initial;",
  64. "opacity: 0.9;",
  65. "background-color: rgba(0,0,0,0.2);}",
  66. ].join(" "));
  67. sliderBar = $("div#sliderBar");
  68. }
  69.  
  70. sliderBar.fadeIn(100);
  71. timer = setTimeout(function() {
  72. sliderBar.fadeOut(700);
  73. }, 1000);
  74.  
  75. sliderBar.html("Volume: " + (player[0].volume * 100).toFixed(0));
  76. }
  77. })();

QingJ © 2025

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