Adds volume control with mouse scroll on page video.
// ==UserScript==
// @name Video Volume Control
// @namespace GamateKID
// @version 1.7
// @license MIT
// @author GamateKID
// @description Adds volume control with mouse scroll on page video.
// @match *://*/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
function secondsElapsed(){
var endTime = new Date();
var timeDiff = endTime - startTime; //in ms
timeDiff /= 1000;
// return seconds
return Math.round(timeDiff);
}
function onReady(){
if(secondsElapsed()<15){
window.condition()?setTimeout(onReady,9):window.callback();
}
}
var startTime = new Date();
window.condition = function () {
return (document.readyState == 'complete');
};
window.callback = function () {
let VOLUME_DELTA = 0.05;
const style = document.createElement('style');
document.querySelector('head').appendChild(style);
initStyles();
window.condition = function () {
return (document.getElementsByTagName('video')[0]==null);
};
window.callback = function(){
var video = document.getElementsByTagName('video')[0];
console.log(video);
var volume = document.createElement('div');
volume.className = 'myvolume'
var container = video.parentNode;
container.appendChild(volume);
var isMouseOverVideo = false;
video.addEventListener('loadeddata', function() {
volume.innerText = parseInt(video.volume * 100);
volume.style.display = 'block';
setTimeout(function() { volume.style.display = 'none' }, 5000);
}, false);
video.addEventListener("mouseover", (event) => {
isMouseOverVideo = true;
}, false);
video.addEventListener("mouseleave", (event) => {
isMouseOverVideo = false;
}, false);
document.addEventListener("wheel", (event) => {
if(isMouseOverVideo){
event.preventDefault();
volume.style.display = 'block';
var volumeValue = video.volume;
if (event.deltaY < 0) {
if(video.muted) video.muted = false;
if(video.volume <= (1-VOLUME_DELTA)){
volumeValue = video.volume + VOLUME_DELTA;
}else{
video.volume = 1;
}
}
if (event.deltaY > 0) {
if(video.volume >= VOLUME_DELTA){
volumeValue = video.volume - VOLUME_DELTA;
}else{
video.volume = 0;
}
}
volumeValue = Math.round((volumeValue) * 100);
volumeValue = Math.ceil(volumeValue / 5) * 5;
volumeValue = volumeValue / 100;
video.volume = volumeValue;
volume.innerText = parseInt(video.volume * 100);
setTimeout(function() { volume.style.display = 'none' }, 5000);
}
}, false);
document.addEventListener("keydown", (event) => {
if (event.keyCode === 37 /*left*/ || event.keyCode === 65 /*left*/ ) {
video.currentTime -= 5;
}
if(event.keyCode === 39 /*right*/ || event.keyCode === 68 /*right*/){
video.currentTime += 5;
}
}, false);
};
onReady();
//CSS styles override
function initStyles() {
/* style.innerHTML = `
.myvolume {
display: none;
position: absolute;
color: orangered;
left: 1em;
font-size: xx-large;
font-weight: bold;
top: 0.7em;
}
`;*/
style.innerHTML = `
.myvolume {
width: 100%;
position: absolute;
z-index: 9999;
top: 0.7em;
color: lime;
font-weight: bold;
font-size: 40px;
text-align: right;
-webkit-text-stroke: 1px black;
right: 20px;
}
`;
}
};
onReady();
})();