Manages the video controls overlay on a youtube video, to prevent it blocking 30-40 pixels on the bottom of the video
当前为
// ==UserScript==
// @name Youtube Video Controls Manager
// @namespace http://your.homepage/
// @version 0.05
// @description Manages the video controls overlay on a youtube video, to prevent it blocking 30-40 pixels on the bottom of the video
// @include http*://www.youtube.com/watch?v=*
// @author D.Slee
// @match https://www.youtube.com/watch?v=rXj3hUB7BH8
// @grant none
// ==/UserScript==
//Known bugs
//- Cinema mode
//- Having inspect element open breaks cursor functions
//Fading Parameters
var inPar = ["default", "8px", "block"]; //Fading parameters (cursor, height, display)
var outPar = ["default", "3px", "none"];
var timeoutPar = ["none", "3px", "none"];
//Objects
var movie_player = document.getElementById("movie_player"); //Entire player
var playerAPI = document.getElementById("player-api"); //Entire player Wrapper
var vidContWrap = document.getElementsByClassName("html5-video-controls")[0]; //All the video controls
var vidCont = document.getElementsByClassName("html5-player-chrome")[0]; //All the video controls (not including progress bar)
var progBar = document.getElementsByClassName("ytp-progress-bar-container")[0]; //Progress Bar
var scrubBn = document.getElementsByClassName("html5-scrubber-button")[0]; //Circle Button (on progress bar)
var vidHeader = document.getElementsByClassName("html5-info-bar ytp-can-share ytp-can-sentiment")[0]; //Video header, synchronises fullscreen
var elements = [scrubBn, vidCont, vidHeader];
//Feel free to edit these parameters (experimental)
var progBarHide = false;
var timeout = 1000;
//Make it always visible to override script
vidContWrap.style.setProperty("opacity", 1, "important"); //Disables youtube's opacity fade script on the progress bar
movie_player.style.setProperty("cursor", "default", "important"); //Fixes youtube script that makes the cursor property none when idle
if (progBarHide === true){
elements.push(vidContWrap); //Adds vidContWrap to the elements with their display value being toggled
}
var fadeOutInterval = setTimeout(Fade, timeout, timeoutPar); //Interval used to fade out when inactive
//Handles mouse events and fades
MainProgram();
function MainProgram(){
ResizeWindow(window.innerWidth);
playerAPI.addEventListener("mousemove", HandleMouseMove); //The event listener needs to be on playerAPI otherwise it would not trigger when the cursor is hidden (on it's child, movie_player)
playerAPI.addEventListener("mouseout", HandleMouseOut);
}
function HandleMouseMove(){
Fade(inPar);
fadeOutInterval = setTimeout(Fade, timeout, timeoutPar);
}
function HandleMouseOut(){
Fade(outPar);
}
function Fade(parameters){
clearTimeout(fadeOutInterval);
movie_player.style.setProperty("cursor", parameters[0], "important");
progBar.style.setProperty("height", parameters[1], "important");
for (var i = 0; i<elements.length; i++){
elements[i].style.display = parameters[2];
}
}
//Window Resize handle
window.onresize = function() {
var windowX = window.innerWidth;
ResizeWindow(windowX);
};
function ResizeWindow(windowX){
var windowSizes = ['240px', '360px', '480px'];
if (progBarHide === false){
windowSizes = ['243px', '363px', '483px'];
}
if (windowX <= 639){
playerAPI.style.height = windowSizes[0];
}
if (windowX < 1294 && windowX > 639){
playerAPI.style.height = windowSizes[1];
}
if (windowX >= 1294){
playerAPI.style.height = windowSizes[2];
}
}