☰

Video Volume Control

Adds volume control with mouse scroll on page video.

  1. // ==UserScript==
  2. // @name         Video Volume Control
  3. // @namespace    GamateKID
  4. // @version      1.7
  5. // @license      MIT
  6. // @author       GamateKID
  7. // @description  Adds volume control with mouse scroll on page video.
  8. // @match        *://*/*
  9. // @grant        none
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.  
  14.     'use strict';
  15.  
  16.     function secondsElapsed(){
  17.         var endTime = new Date();
  18.         var timeDiff = endTime - startTime; //in ms
  19.         timeDiff /= 1000;
  20.         // return seconds
  21.         return Math.round(timeDiff);
  22.     }
  23.  
  24.     function onReady(){
  25.         if(secondsElapsed()<15){
  26.             window.condition()?setTimeout(onReady,9):window.callback();
  27.         }
  28.     }
  29.  
  30.     var startTime = new Date();
  31.  
  32.     window.condition = function () {
  33.         return (document.readyState == 'complete');
  34.     };
  35.     window.callback = function () {
  36.  
  37.         let VOLUME_DELTA = 0.05;
  38.  
  39.         const style = document.createElement('style');
  40.         document.querySelector('head').appendChild(style);
  41.  
  42.         initStyles();
  43.  
  44.         window.condition = function () {
  45.             return (document.getElementsByTagName('video')[0]==null);
  46.         };
  47.         window.callback = function(){
  48.             var video = document.getElementsByTagName('video')[0];
  49.  
  50.             console.log(video);
  51.  
  52.             var volume = document.createElement('div');
  53.             volume.className = 'myvolume'
  54.  
  55.             var container = video.parentNode;
  56.             container.appendChild(volume);
  57.  
  58.             var isMouseOverVideo = false;
  59.  
  60.             video.addEventListener('loadeddata', function() {
  61.                 volume.innerText = parseInt(video.volume * 100);
  62.                 volume.style.display = 'block';
  63.                 setTimeout(function() { volume.style.display = 'none' }, 5000);
  64.             }, false);
  65.  
  66.             video.addEventListener("mouseover", (event) => {
  67.                 isMouseOverVideo = true;
  68.             }, false);
  69.  
  70.             video.addEventListener("mouseleave", (event) => {
  71.                 isMouseOverVideo = false;
  72.             }, false);
  73.  
  74.             document.addEventListener("wheel", (event) => {
  75.                 if(isMouseOverVideo){
  76.                     event.preventDefault();
  77.                     volume.style.display = 'block';
  78.                     var volumeValue = video.volume;
  79.                     if (event.deltaY < 0) {
  80.                         if(video.muted) video.muted = false;
  81.                         if(video.volume <= (1-VOLUME_DELTA)){
  82.                             volumeValue = video.volume + VOLUME_DELTA;
  83.                         }else{
  84.                             video.volume = 1;
  85.                         }
  86.                     }
  87.                     if (event.deltaY > 0) {
  88.                         if(video.volume >= VOLUME_DELTA){
  89.                             volumeValue = video.volume - VOLUME_DELTA;
  90.                         }else{
  91.                             video.volume = 0;
  92.                         }
  93.                     }
  94.                     volumeValue = Math.round((volumeValue) * 100);
  95.                     volumeValue = Math.ceil(volumeValue / 5) * 5;
  96.                     volumeValue = volumeValue / 100;
  97.                     video.volume = volumeValue;
  98.                     volume.innerText = parseInt(video.volume * 100);
  99.                     setTimeout(function() { volume.style.display = 'none' }, 5000);
  100.                 }
  101.             }, false);
  102.  
  103.             document.addEventListener("keydown", (event) => {
  104.  
  105.                 if (event.keyCode === 37 /*left*/ || event.keyCode === 65 /*left*/ ) {
  106.                     video.currentTime -= 5;
  107.                 }
  108.  
  109.                 if(event.keyCode === 39 /*right*/ || event.keyCode === 68 /*right*/){
  110.                     video.currentTime += 5;
  111.                 }
  112.  
  113.             }, false);
  114.  
  115.         };
  116.         onReady();
  117.         //CSS styles override
  118.         function initStyles() {
  119.            /* style.innerHTML = `
  120. .myvolume {
  121. display: none;
  122. position: absolute;
  123. color: orangered;
  124. left: 1em;
  125. font-size: xx-large;
  126. font-weight: bold;
  127. top: 0.7em;
  128. }
  129. `;*/
  130.             style.innerHTML = `
  131. .myvolume {
  132. width: 100%;
  133. position: absolute;
  134. z-index: 9999;
  135. top: 0.7em;
  136. color: lime;
  137. font-weight: bold;
  138. font-size: 40px;
  139. text-align: right;
  140. -webkit-text-stroke: 1px black;
  141. right: 20px;
  142. }
  143. `;
  144.  
  145.         }
  146.     };
  147.     onReady();
  148. })();