Simple HTML5 video player

Greasy Fork is available in English.
Simple HTML5 video player

Replaces any default HTML5 player with custom controls
Från och med 2018-10-22. Se den senaste versionen.
Ask a question, post a review, or report the script.
// ==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.0
// @namespace https://greasyfork.org/users/3167
// ==/UserScript==


var videos = document.getElementsByTagName('video');
for (var i=0; i<videos.length; i++) {
		
	var video = videos[i];
	if (video.controls==true) {
			
		video.controls=false;

		var videowrapper = videowrapper || document.createElement('videowrapper');

		//videowrapper.className="videowrapper";

		videowrapper.style.position="relative";
		videowrapper.style.width="auto";
		videowrapper.style.display="inline-block";
		videowrapper.style.background="green";
		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 = controls || document.createElement('controls');
		video.parentNode.insertBefore(controls, video.nextSibling);

		controls.style.background="whitesmoke";
		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 = playbutton || document.createElement('button');
		controls.appendChild(playbutton);
		playbutton.innerHTML="&#x25b6;";
		playbutton.style.lineHeight="32px";
		playbutton.style.position="absolute";
		playbutton.style.left="0px";
		playbutton.style.bottom="0";
		playbutton.style.border="none";
		playbutton.style.paddingTop="0";
		playbutton.style.paddingBottom="0";
		playbutton.style.background="none";
		playbutton.style.fontFamily="Segoe UI Symbol";
		playbutton.style.fontSize="18px";

		var timestamp = 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 = 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="12px";
		seekbar.style.height="2px";
		seekbar.style.background="blue";

		var mutebutton = mutebutton || document.createElement('button');
		controls.appendChild(mutebutton);
		mutebutton.innerHTML="&#x1f50a;";
		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.background="none";
		mutebutton.style.fontFamily="Segoe UI Symbol";
		mutebutton.style.fontSize="18px";

		var volumebar = volumebar || document.createElement('input');
		controls.appendChild(volumebar);
		volumebar.type="range";
		volumebar.min=0;
		volumebar.max=1;
		volumebar.step=0.1;
		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="12px";
		volumebar.style.height="2px";
		volumebar.style.background="blue";

		var fsbutton = fsbutton || document.createElement('button');
		controls.appendChild(fsbutton);
		fsbutton.innerHTML="&#x25a1;";
		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.background="none";
		fsbutton.style.fontFamily="Segoe UI Symbol";
		fsbutton.style.fontSize="18px";


		var savebutton = savebutton || document.createElement('a');
		controls.appendChild(savebutton);
		savebutton.innerHTML="&#x1f847;";
		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.background="none";
		savebutton.style.fontFamily="Segoe UI Symbol";
		savebutton.style.fontSize="18px";
		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 = "&#x23f8;";
		});

		video.addEventListener("pause", function() {
		  playbutton.innerHTML = "&#x25b6;";
		});

		video.addEventListener("timeupdate", function() {
		  timestamp.innerHTML = HHMMSS(video.currentTime) + "/" + HHMMSS(video.duration);
		});
		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("change", 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() {
		  video.pause();
		});

		// Play the video when the slider handle is dropped
		seekbar.addEventListener("mouseup", function() {
		  video.play();
		});

		volumebar.addEventListener("input", function() {
		  video.volume = volumebar.value;
		});

		video.addEventListener("volumechange", function() {
		  if (video.muted || video.volume==0) {
			mutebutton.innerHTML = "&#x1f507;";
		  } else {
			mutebutton.innerHTML = "&#x1f50a;";
		  }
		});
	}
}

var stylesheet = `
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: #ddd;
    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: grey;
    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: #ddd;
    border: none;
    border-radius: 3px;
}
videowrapper input[type=range]::-moz-range-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: goldenrod;
}

/*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: #ddd;
    border-radius: 10px;
}
videowrapper input[type=range]::-ms-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: goldenrod;
}
videowrapper input[type=range]:focus::-ms-fill-lower {
    background: #888;
}
videowrapper input[type=range]:focus::-ms-fill-upper {
    background: #ccc;
}
`;

if (GM_addStyle) {
  GM_addStyle (stylesheet);
} else {
  var css = document.createElement("style");
  css.type = "text/css";
  css.innerHTML = stylesheet;
  document.head.appendChild(css);
}