Replaces any default HTML5 player with custom controls
As of
// ==UserScript==
// @name Simple HTML5 video player
// @description Replaces any default HTML5 player with custom controls
// @grant GM_addStyle
// @include *
// @run-at document-load
// @version 1.6
// @namespace https://greasyfork.org/users/3167
// ==/UserScript==
var videos = document.getElementsByTagName('video');
for (var i=0; i<videos.length; i++) {
(function(video) {
if (video.controls==true) {
video.controls=false;
var videowrapper = document.createElement('videowrapper');
//videowrapper.className="videowrapper";
videowrapper.style.position="relative";
videowrapper.style.width="auto";
videowrapper.style.display="inline-block";
videowrapper.style.fontSize="0";
if (video.parentNode==document.body) {
document.body.style.display="flex";
document.body.style.alignItems="center";
document.body.style.justifyContent="center";
}
if (video.parentNode!=videowrapper) {
video.parentNode.insertBefore(videowrapper, video);
videowrapper.appendChild(video);
}
video.style.position="relative";
var controls = document.createElement('controls');
video.parentNode.insertBefore(controls, video.nextSibling);
controls.style.background="rgba(0, 0, 0, 0.5)";
controls.style.height="32px";
controls.style.width="100%";
controls.style.bottom="0";
controls.style.display="block";
controls.style.position="absolute";
controls.style.fontFamily="Segoe UI Symbol";
controls.style.cursor="default";
controls.style.fontSize="18px";
controls.style.webkitUserSelect="none"; /* Chrome all / Safari all */
controls.style.mozUserSelect="none"; /* Firefox all */
controls.style.msUserSelect="none"; /* IE 10+ */
controls.style.userSelect="none"; /* Likely future */
var playbutton = document.createElement('button');
controls.appendChild(playbutton);
playbutton.innerHTML="▶";
playbutton.style.lineHeight="32px";
playbutton.style.position="absolute";
playbutton.style.left="4px";
playbutton.style.bottom="0";
playbutton.style.border="none";
playbutton.style.paddingTop="0";
playbutton.style.paddingBottom="0";
playbutton.style.paddingLeft="4px";
playbutton.style.paddingRight="4px";
playbutton.style.background="none";
playbutton.style.fontFamily="Segoe UI Symbol";
playbutton.style.fontSize="18px";
playbutton.style.margin="0";
playbutton.style.height="32px";
var timestamp = document.createElement('span');
controls.appendChild(timestamp);
timestamp.innerHTML="0:00/0:00";
timestamp.style.lineHeight="32px";
timestamp.style.position="absolute";
timestamp.style.left="32px";
timestamp.style.bottom="0";
var seekbar = document.createElement('input');
controls.appendChild(seekbar);
seekbar.type="range";
seekbar.value=0;
seekbar.innerHTML="";
seekbar.style.lineHeight="32px";
seekbar.style.position="absolute";
seekbar.style.left="140px";
seekbar.style.right="220px";
seekbar.style.width="calc(100% - 140px - 220px)";
seekbar.style.bottom="4px";
seekbar.style.height="20px";
seekbar.style.background="none";
seekbar.style.border="none";
seekbar.style.margin="0";
seekbar.style.padding="0";
var mutebutton = document.createElement('button');
controls.appendChild(mutebutton);
mutebutton.innerHTML="🔊";
mutebutton.style.lineHeight="32px";
mutebutton.style.position="absolute";
mutebutton.style.right="180px";
mutebutton.style.bottom="0";
mutebutton.style.border="none";
mutebutton.style.paddingTop="0";
mutebutton.style.paddingBottom="0";
mutebutton.style.paddingLeft="4px";
mutebutton.style.paddingRight="4px";
mutebutton.style.background="none";
mutebutton.style.fontFamily="Segoe UI Symbol";
mutebutton.style.fontSize="18px";
mutebutton.style.margin="0";
mutebutton.style.height="32px";
var volumebar = document.createElement('input');
controls.appendChild(volumebar);
volumebar.type="range";
volumebar.min=0;
volumebar.max=1;
volumebar.step=0.01;
volumebar.value=0.5;
volumebar.innerHTML="";
volumebar.style.lineHeight="32px";
volumebar.style.position="absolute";
volumebar.style.width="100px";
volumebar.style.right="70px";
volumebar.style.bottom="4px";
volumebar.style.height="20px";
volumebar.style.background="none";
volumebar.style.border="none";
volumebar.style.margin="0";
volumebar.style.padding="0";
var fsbutton = document.createElement('button');
controls.appendChild(fsbutton);
fsbutton.innerHTML="□";
fsbutton.style.lineHeight="32px";
fsbutton.style.position="absolute";
fsbutton.style.right="40px";
fsbutton.style.bottom="0";
fsbutton.style.border="none";
fsbutton.style.paddingTop="0";
fsbutton.style.paddingBottom="0";
fsbutton.style.paddingLeft="4px";
fsbutton.style.paddingRight="4px";
fsbutton.style.background="none";
fsbutton.style.fontFamily="Segoe UI Symbol";
fsbutton.style.fontSize="18px";
fsbutton.style.margin="0";
fsbutton.style.height="32px";
var savebutton = document.createElement('a');
controls.appendChild(savebutton);
savebutton.innerHTML="🡇";
savebutton.style.lineHeight="32px";
savebutton.style.position="absolute";
savebutton.style.right="8px";
savebutton.style.bottom="0";
savebutton.style.border="none";
savebutton.style.paddingTop="0";
savebutton.style.paddingBottom="0";
savebutton.style.paddingLeft="4px";
savebutton.style.paddingRight="4px";
savebutton.style.background="none";
savebutton.style.fontFamily="Segoe UI Symbol";
savebutton.style.fontSize="18px";
savebutton.style.margin="0";
savebutton.style.height="32px";
savebutton.href=video.currentSrc;
savebutton.download="";
function HHMMSS(num) {
num = num || 0;
var sec_num = Math.floor(num);
var hours = Math.floor(sec_num / 3600);
var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
var seconds = sec_num - (hours * 3600) - (minutes * 60);
if (hours < 10) {hours = "0"+hours;}
if (minutes < 10) {minutes = "0"+minutes;}
if (seconds < 10) {seconds = "0"+seconds;}
if (hours<1) {
return minutes+':'+seconds;
}
return hours+':'+minutes+':'+seconds;
}
playbutton.addEventListener("click", function() {
if (video.paused == true) {
video.play();
} else {
video.pause();
}
});
video.addEventListener("click", function() {
if (video.paused == true) {
video.play();
} else {
video.pause();
}
});
video.addEventListener("play", function() {
playbutton.innerHTML = "⏸";
controls.className="playing";
});
video.addEventListener("pause", function() {
playbutton.innerHTML = "▶";
controls.className="paused";
});
video.addEventListener("timeupdate", function() {
timestamp.innerHTML = HHMMSS(video.currentTime) + "/" + HHMMSS(video.duration);
});
video.addEventListener("durationchange", function() {
timestamp.innerHTML = HHMMSS(video.currentTime) + "/" + HHMMSS(video.duration);
});
mutebutton.addEventListener("click", function() {
if (video.muted == false) {
video.muted = true;
} else {
video.muted = false;
}
});
fsbutton.addEventListener("click", function() {
if (video.requestFullscreen) {
video.requestFullscreen();
} else if (video.mozRequestFullScreen) {
video.mozRequestFullScreen(); // Firefox
} else if (video.webkitRequestFullscreen) {
video.webkitRequestFullscreen(); // Chrome and Safari
}
});
seekbar.addEventListener("input", function() {
var time = video.duration * (seekbar.value / 100);
video.currentTime = time;
});
video.addEventListener("timeupdate", function() {
var value = (100 / video.duration) * video.currentTime;
seekbar.value = value;
});
seekbar.addEventListener("mousedown", function() {
seekbar.paused = video.paused;
video.pause();
});
// Play the video when the slider handle is dropped
seekbar.addEventListener("mouseup", function() {
if (!seekbar.paused) {
video.play();
}
});
volumebar.addEventListener("input", function() {
video.volume = volumebar.value;
localStorage.setItem("videovolume", video.volume);
});
video.addEventListener("volumechange", function() {
if (video.muted || video.volume==0) {
mutebutton.innerHTML = "🔇";
} else {
mutebutton.innerHTML = "🔊";
}
});
volumebar.value = localStorage.getItem("videovolume", video.volume);
video.volume = volumebar.value;
}
})(videos[i])
}
var stylesheet = `
videowrapper controls > * {
color: lightgrey;
/* mix-blend-mode: difference; */
background: none;
}
videowrapper controls.playing {
opacity: 0;
}
videowrapper controls {
transition: all 0.5s ease;
}
videowrapper:hover controls {
opacity: 1;
}
videowrapper input[type=range] {
/*removes default webkit styles*/
-webkit-appearance: none;
/*fix for FF unable to apply focus style bug */
border: 1px solid white;
/*required for proper track sizing in FF*/
width: 300px;
}
videowrapper input[type=range]::-webkit-slider-runnable-track {
width: 300px;
height: 5px;
background: #444444;
border: none;
border-radius: 3px;
}
videowrapper input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: lightgrey;
margin-top: -5px;
}
videowrapper input[type=range]:focus {
outline: none;
}
videowrapper input[type=range]:focus::-webkit-slider-runnable-track {
background: #ccc;
}
videowrapper input[type=range]::-moz-range-track {
width: 300px;
height: 5px;
background: #444444;
border: none;
border-radius: 3px;
}
videowrapper input[type=range]::-moz-range-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: lightgrey;
}
/*hide the outline behind the border*/
videowrapper input[type=range]:-moz-focusring{
outline: 1px solid white;
outline-offset: -1px;
}
videowrapper input[type=range]::-ms-track {
width: 300px;
height: 5px;
/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
background: transparent;
/*leave room for the larger thumb to overflow with a transparent border */
border-color: transparent;
border-width: 6px 0;
/*remove default tick marks*/
color: transparent;
}
videowrapper input[type=range]::-ms-fill-lower {
background: #777;
border-radius: 10px;
}
videowrapper input[type=range]::-ms-fill-upper {
background: #444444;
border-radius: 10px;
}
videowrapper input[type=range]::-ms-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: lightgrey;
}
videowrapper input[type=range]:focus::-ms-fill-lower {
background: #888;
}
videowrapper input[type=range]:focus::-ms-fill-upper {
background: #ccc;
}
`;
if (typeof GM_addStyle != "undefined") {
GM_addStyle (stylesheet);
} else {
var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = stylesheet;
document.head.appendChild(css);
}