☰

Simple HTML5 video player

Replaces any default HTML5 player with custom controls

  1. // ==UserScript==
  2. // @name         Simple HTML5 video player
  3. // @description  Replaces any default HTML5 player with custom controls
  4. // @grant        GM_addStyle
  5. // @include *
  6. // @run-at document-load
  7. // @version 8
  8. // @namespace https://greasyfork.org/users/3167
  9. // @license MIT
  10. // ==/UserScript==
  11.  
  12. var videowrapper_init = false;
  13.  
  14. function HHMMSS(num) {
  15.     num = num || 0;
  16.     var sec_num = Math.floor(num);
  17.  
  18.     var hours   = Math.floor(sec_num / 3600);
  19.     var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
  20.     var seconds = sec_num - (hours * 3600) - (minutes * 60);
  21.  
  22.     if (hours   < 10) {hours   = "0"+hours;}
  23.     if (minutes < 10) {minutes = "0"+minutes;}
  24.     if (seconds < 10) {seconds = "0"+seconds;}
  25.  
  26.     if (hours<1) {
  27.         return minutes+':'+seconds;
  28.     }
  29.     return hours+':'+minutes+':'+seconds;
  30. }
  31.  
  32. function fs_status() {
  33.     if (document.fullscreenElement) {
  34.         return 1;
  35.     }
  36.     else if (document.webkitFullscreenElement) {
  37.         return 1;
  38.     }
  39.     else if (document.mozFullScreenElement) {
  40.         return 1;
  41.     }
  42.     else return -1;
  43. }
  44.  
  45. function init_videowrapper() {
  46.  
  47.     var videos = document.getElementsByTagName('video');
  48.     for (var i=0; i<videos.length; i++) {
  49.  
  50.         (function(video) {
  51.             if (video.controls==true && !video.iswrapped) {
  52.                 var spacing = 4;
  53.               
  54.                 var computedStyle = window.getComputedStyle(video);
  55.               
  56.                 video.controls_timeout=false;
  57.               
  58. 				
  59.                 video.controls=false;
  60.                 video.iswrapped=true;
  61.  
  62.                 var videowrapper = document.createElement('videowrapper');
  63.                 videowrapper.className=video.className;
  64.  
  65.                 var showui = function() {
  66.                     videowrapper.classList.add("showui");
  67.                 }
  68.                 var hideui = function() {
  69.                     videowrapper.classList.remove("showui");
  70.                 }
  71.                 var peekui = function(duration) {
  72.                     duration = duration || 1000;
  73.                   
  74.                     showui();
  75.                     if (video.controls_timeout) {
  76.                       clearTimeout(video.controls_timeout);
  77.                     }
  78.                     
  79.                     video.controls_timeout = setTimeout(hideui, duration);
  80.                 }
  81.               
  82. 			                  
  83.                 var showosd = function() {
  84.                     videowrapper.classList.add("showosd");
  85.                 }
  86.                 var hideosd = function() {
  87.                     videowrapper.classList.remove("showosd");
  88.                 }
  89.                 var peekosd = function(duration) {
  90.                     duration = duration || 1000;
  91.                   
  92.                     showosd();
  93.                     if (video.osd_timeout) {
  94.                       clearTimeout(video.osd_timeout);
  95.                     }
  96.                     
  97.                     video.osd_timeout = setTimeout(hideosd, duration);
  98.                 }
  99. 				
  100. 				var setosd = function(content) {
  101. 					videowrapper.setAttribute("data-osd", content)
  102. 				}
  103. 					
  104. 				setosd('Loading'); 
  105. 			  
  106.                 if (computedStyle.position == "absolute") {
  107.                   videowrapper.className="absolute";
  108.                 } else {
  109.                   videowrapper.className="relative";
  110.                 }
  111.               
  112.                 if (video.height>0) {
  113.                   videowrapper.style.height=video.height;
  114.                 }                
  115.                 if (video.width>0) {
  116.                   videowrapper.style.width=video.width;
  117.                 }
  118.               
  119.                 video.classList.add("iswrapped");
  120.  
  121.                 if (video.parentNode==document.body && document.body.childNodes.length==1) {
  122.                     //document.body.style.display="flex";
  123.                     //document.body.style.alignItems="center";
  124.                     //document.body.style.justifyContent="center";
  125.                     //document.body.style.margin="auto";
  126.                     //document.body.style.height="100vh";
  127. 					document.body.className="videobody";
  128.                 }
  129.  
  130.                 if (video.parentNode!=videowrapper) { 
  131.                     video.parentNode.insertBefore(videowrapper, video); 
  132.                     videowrapper.appendChild(video);
  133.                 }
  134.  
  135.                 var controls = document.createElement('controls');
  136.                 video.parentNode.insertBefore(controls, video.nextSibling);
  137.  
  138.                 var playbutton = document.createElement('button');
  139.                 controls.appendChild(playbutton);
  140.                 playbutton.innerHTML="&#x25b6;";
  141.  
  142.                 playbutton.style.left = spacing + "px";
  143.  
  144.                 var timestamp = document.createElement('span');
  145.                 controls.appendChild(timestamp);
  146.                 timestamp.innerHTML="0:00/0:00";
  147.  
  148.                 timestamp.style.left = (spacing + playbutton.clientWidth + spacing) + "px";
  149.  
  150.               
  151.                 var fsbutton = document.createElement('button');
  152.                 controls.appendChild(fsbutton);
  153.                 fsbutton.innerHTML="&#x25a1;";
  154.  
  155.                 fsbutton.style.right = spacing + "px";
  156.  
  157.                 var volumebar = document.createElement('input');
  158.                 controls.appendChild(volumebar);
  159.                 volumebar.type="range";
  160.                 volumebar.min=0;
  161.                 volumebar.max=1;
  162.  
  163.                 volumebar.step=0.01;
  164.                 volumebar.value=0.5;
  165.                 volumebar.innerHTML="";
  166.  
  167.                 volumebar.style.width="50px";
  168.                 volumebar.style.right= (spacing + fsbutton.clientWidth + spacing) + "px";
  169.  
  170.                             
  171.                 var mutebutton = document.createElement('button');
  172.                 controls.appendChild(mutebutton);
  173.                 mutebutton.innerHTML="&#x1f50a;";
  174.                 mutebutton.style.right=(spacing + volumebar.clientWidth + spacing + fsbutton.clientWidth + spacing) + "px";
  175.  
  176.               
  177.                 var seekbar = document.createElement('input');
  178.                 controls.appendChild(seekbar);
  179.                 seekbar.type="range";
  180.                 seekbar.value=0;
  181.                 seekbar.step=0.01;
  182.                 seekbar.innerHTML="";
  183.  
  184.                 seekbar.hidden = true;
  185.  
  186.                 var header = document.createElement('header');
  187.                 video.parentNode.insertBefore(header, video.nextSibling);
  188.  
  189.                 var label = document.createElement('label');
  190.                 header.appendChild(label);
  191.                 label.innerHTML="Loading...";
  192.  
  193.                 /*
  194. 			var savebutton = document.createElement('a');
  195. 			controls.appendChild(savebutton);
  196. 			savebutton.innerHTML="&#x1f847;";
  197. 			savebutton.style.lineHeight="32px";
  198. 			savebutton.style.position="absolute";
  199. 			savebutton.style.right="8px";
  200. 			savebutton.style.bottom="0";
  201. 			savebutton.style.border="none";
  202. 			savebutton.style.paddingTop="0";
  203. 			savebutton.style.paddingBottom="0";
  204. 			savebutton.style.paddingLeft="4px";
  205. 			savebutton.style.paddingRight="4px";
  206. 			savebutton.style.background="none";
  207. 			savebutton.style.fontFamily="Segoe UI Symbol";
  208. 			savebutton.style.fontSize="18px";
  209. 			savebutton.style.margin="0";
  210. 			savebutton.style.height="32px";
  211.  
  212. 			savebutton.href=video.currentSrc;
  213. 			savebutton.download="";
  214. 				
  215. */
  216. 				var playvideo = function() {
  217. 					video.play();						
  218. 					if (video.livemode) {
  219. 						video.currentTime = video.duration - 3;
  220. 					}
  221. 				}
  222.  
  223.                 playbutton.addEventListener("click", function() {
  224.                     if (video.paused == true) {
  225.                         playvideo();
  226.                     } else {
  227.                         video.pause();
  228.                     }
  229. 					
  230.                 });
  231.  
  232.                 video.addEventListener("click", function() {
  233. 					if (video.paused == true) {
  234. 						playvideo();
  235. 					} else {
  236. 						if (!video.livemode) {
  237. 							video.pause();
  238. 						}
  239. 					}
  240.                 });
  241.  
  242.                 video.addEventListener("play", function() {					
  243. 					setosd(playbutton.innerHTML);
  244. 					peekosd(1000);
  245. 					
  246.                     playbutton.innerHTML = "&#10074;&#10074;";
  247.                     //controls.className="playing";
  248.                     videowrapper.classList.remove("paused");
  249.                     videowrapper.classList.add("playing");
  250.  
  251.                 });
  252.  
  253.                 video.addEventListener("pause", function() {					
  254. 					setosd(playbutton.innerHTML);
  255. 					peekosd(3000);
  256. 					
  257.                     playbutton.innerHTML = "&#x25b6;";
  258.                     //controls.className="paused";
  259.                     videowrapper.classList.remove("playing");
  260.                     videowrapper.classList.add("paused");
  261.                 });
  262. 				
  263. 				var updatetimestamp = function() {
  264. 					if (video.livemode) {
  265. 						var buffer = Math.round(video.duration - video.currentTime);
  266. 						timestamp.innerHTML = "Buffer: " + buffer + "s";
  267. 					} else {
  268. 						timestamp.innerHTML = HHMMSS(video.currentTime) + "/" + HHMMSS(video.duration);
  269. 					}
  270. 				}
  271.  
  272.                 video.addEventListener("timeupdate", function() {
  273. 					updatetimestamp();
  274.                 });
  275.  
  276.                 video.addEventListener("durationchange", function() {
  277.                     updatetimestamp();
  278.                 });
  279.  
  280.                 mutebutton.addEventListener("click", function() {
  281.                     if (video.muted == false) {
  282.                         video.muted = true;
  283.                     } else {
  284.                         video.muted = false;
  285.                     }
  286.                 });
  287.  
  288.                 var togglefs = function() {
  289.                     if (fs_status()>0) {
  290.                         if (document.exitFullscreen) {
  291.                             document.exitFullscreen();
  292.                         } else if (document.webkitExitFullscreen) {
  293.                             document.webkitExitFullscreen();
  294.                         } else if (document.mozCancelFullScreen) {
  295.                             document.mozCancelFullScreen();
  296.                         } else if (document.msExitFullscreen) {
  297.                             document.msExitFullscreen();
  298.                         }
  299.                     }
  300.                     else {
  301.  
  302.                         if (videowrapper.requestFullscreen) {
  303.                             videowrapper.requestFullscreen();
  304.                         } else if (videowrapper.mozRequestFullScreen) {
  305.                             videowrapper.mozRequestFullScreen(); // Firefox
  306.                         } else if (videowrapper.webkitRequestFullscreen) {
  307.                             videowrapper.webkitRequestFullscreen(); // Chrome and Safari
  308.                         }
  309.                     }
  310.                 };
  311.               
  312.                 fsbutton.addEventListener("click", togglefs);
  313.               
  314.                 videowrapper.addEventListener("dblclick", togglefs);
  315.  
  316.                 seekbar.addEventListener("input", function() {
  317.                     var time = video.duration * (seekbar.value / 100);
  318.                     video.currentTime = time;
  319.  
  320.                 });
  321.  
  322.  
  323.                 video.addEventListener("timeupdate", function() {
  324.                     var value = (100 / video.duration) * video.currentTime;
  325.                     var progress = (video.currentTime / video.duration);
  326.                     seekbar.value = value;
  327.                     //seekbar.style.background = '-webkit-gradient( linear, left top, right top, color-stop(' + progress + ', var(--range-progress-color)), color-stop(' + progress + ', var(--range-background-color)))';
  328.                 });
  329.  
  330.                 var updatebuffer = function() {
  331. 								
  332. 					if (video.duration == Infinity || video.hls || video.livemode) {
  333. 						video.livemode = true;
  334. 					}
  335. 				
  336. 					if (video.livemode) {
  337. 						seekbar.hidden = true;
  338. 						
  339. 						label.innerHTML = "Live";
  340. 					} else {
  341. 					
  342. 						var start = video.buffered.length>0 ? ( video.buffered.start(0) / video.duration) : 0;
  343. 						var end = video.buffered.length>0 ? (video.buffered.end(0) / video.duration) : 0;
  344. 					  
  345. 						seekbar.hidden = false;
  346. 					  
  347. 						seekbar.style.left = (spacing + playbutton.clientWidth + spacing + timestamp.clientWidth + spacing) + "px";
  348. 						seekbar.style.right= (spacing + mutebutton.clientWidth + spacing + volumebar.clientWidth + spacing + fsbutton.clientWidth + spacing) + "px";
  349. 						seekbar.style.width='calc(100% - ' + seekbar.style.left + ' - ' + seekbar.style.right + ')';
  350. 					  
  351. 						seekbar.style.background = '-webkit-gradient( linear, left top, right top, color-stop(' + start + ', var(--range-background-color)), color-stop(' + start + ', var(--range-progress-color)), color-stop(' + end  + ', var(--range-progress-color)), color-stop(' + end + ', var(--range-background-color)))';
  352.  
  353. 						if (video.currentSrc && video.currentSrc.length>0) {
  354. 							label.innerHTML = decodeURIComponent(video.currentSrc.split("/").pop());
  355. 						}
  356. 					}
  357.  
  358. 					if (video.videoHeight>0) {
  359. 						videowrapper.classList.remove("audiomode");
  360. 						videowrapper.classList.add("videomode");
  361. 					} else {
  362. 						videowrapper.classList.remove("videomode");
  363. 						videowrapper.classList.add("audiomode");
  364. 					}
  365.  
  366.                 };
  367.  
  368.                 video.addEventListener("timeupdate", updatebuffer);
  369.                 video.addEventListener("canplay", updatebuffer);
  370.                 video.addEventListener("progress", updatebuffer);
  371.                 video.addEventListener("canplaythrough", updatebuffer);
  372.  
  373.                 seekbar.addEventListener("mousedown", function() {
  374.                     seekbar.paused = video.paused;
  375.                     video.pause();
  376.                 });
  377.  
  378.                 // Play the video when the slider handle is dropped
  379.                 seekbar.addEventListener("mouseup", function() {
  380.                     if (!seekbar.paused) {
  381.                         video.play();
  382.                     }
  383.                 });
  384.  
  385.                 volumebar.addEventListener("input", function() {
  386.                     video.volume = volumebar.value;     			
  387.                 });
  388.                 
  389.                 video.addEventListener('wheel', function(e) {
  390.                     e.preventDefault();
  391.                     var volumedelta = 0.10;
  392.                     if (e.deltaY < 0) {
  393.                         video.volume = Math.min(video.volume+volumedelta, 1);
  394.                     }
  395.                     if (e.deltaY > 0) {
  396.                         video.volume = Math.max(video.volume-volumedelta, 0);
  397.                     }
  398.                     volumebar.value = video.volume;
  399.  
  400. 					var volumedata = Math.round(video.volume*100) + "%";
  401.  
  402. 					setosd(volumedata);
  403. 					peekosd(1000);
  404.                 });
  405.              
  406.  
  407.                 var updatevolume = function() {
  408.                     if (video.muted || video.volume==0) {
  409.                         mutebutton.innerHTML = "&#x1f507;";
  410.                     } else {
  411.                         mutebutton.innerHTML = "&#x1f50a;";
  412.                     }
  413.                     volumebar.style.background = '-webkit-gradient( linear, left top, right top, color-stop(' + video.volume + ', var(--range-progress-color)), color-stop(' + video.volume + ', var(--range-background-color)))';
  414.                     
  415.                     localStorage.setItem("videovolume", video.volume);
  416.  
  417.                 }
  418.  
  419.                 video.addEventListener("volumechange", updatevolume);
  420.  
  421.                 volumebar.value = localStorage.getItem("videovolume", video.volume);
  422.                 video.volume = volumebar.value;
  423.  
  424.                 videowrapper.addEventListener("mousemove", function() {
  425.                     peekui(1000);
  426.                     //seekbar.style.background = '-webkit-gradient( linear, left top, right top, color-stop(' + progress + ', var(--range-progress-color)), color-stop(' + progress + ', var(--range-background-color)))';
  427.                 });
  428.  
  429.               
  430.               
  431.                 updatebuffer();
  432.               
  433.                 updatevolume();
  434.  
  435.                 //seekbar.style.background = '-webkit-gradient( linear, left top, right top, color-stop(' + seekbar.value / 100 + ', var(--range-progress-color)), color-stop(' + seekbar.value / 100 + ', var(--range-background-color)))';
  436.                 //volumebar.style.background = '-webkit-gradient( linear, left top, right top, color-stop(' + video.volume + ', var(--range-progress-color)), color-stop(' + video.volume + ', var(--range-background-color)))';
  437.             }
  438.         })(videos[i])
  439.     }
  440. }
  441.  
  442. var stylesheet = `
  443. body.videobody {
  444.     height: 100vh;
  445.     margin: 0;
  446.     padding: 0;
  447.     display: flex;
  448. }
  449. videowrapper button {
  450.     font-family: "Segoe UI Symbol", system-ui, sans-serif !important;
  451. }
  452. videowrapper label, videowrapper:before {
  453.     font-family: system-ui, sans-serif !important;
  454. }
  455. videowrapper {
  456. 	--background-color: rgba(0, 0, 0, 0.5);
  457.     --controls-color: #dcdcdc;
  458.     --range-progress-color: #8c8c8c;
  459.     --range-background-color: #3c3c3c;
  460.  
  461.     display: block;
  462.     font-size: 0px;
  463.  
  464.     position: relative;
  465. 	width: auto;
  466.     height: auto;
  467.     background: inherit;
  468. }
  469. videowrapper.absolute {
  470.     display: flex;
  471.     position: absolute;
  472.     top: 0;
  473.     bottom: 0;
  474.     left: 0;
  475.     right: 0;
  476.     margin: auto;
  477. }
  478. .videobody videowrapper.absolute {
  479.     position: relative;
  480. }
  481. videowrapper video.iswrapped {
  482.     position: relative;
  483.     max-height: 100vh;
  484. }
  485. videowrapper:-webkit-full-page-media {
  486.     width: auto;
  487.     height: auto;
  488. }
  489. videowrapper:-webkit-full-screen {
  490.     width: 100%;
  491.     height: 100%;
  492. }
  493. videowrapper video::-webkit-media-controls-enclosure {
  494.   display:none !important;
  495. }
  496. videowrapper:-webkit-full-screen controls,
  497. videowrapper:-webkit-full-screen header {
  498.   z-index: 2147483647;
  499. }
  500.  
  501. videowrapper controls > *,
  502. videowrapper header > * {
  503.     color: var(--controls-color);
  504.     /* mix-blend-mode: difference; */
  505.     background: none;
  506.     outline: none;
  507.     line-height: 32px;
  508.     position: absolute;
  509.     font-family: monospace;
  510. }
  511.  
  512. videowrapper controls,
  513. videowrapper header {
  514.     overflow: hidden;
  515.     white-space: nowrap;
  516.  
  517. 	transition: all 0.5s ease !important;
  518.     background: var(--background-color) !important;
  519.     height: 32px !important;
  520.     width: 100% !important;
  521.     display: block !important;
  522.     position: absolute !important;
  523.     cursor: default !important;
  524.     font-size: 18px !important;
  525.     user-select: none;
  526. }
  527. videowrapper controls {
  528.     bottom: 0px !important;
  529. }
  530. videowrapper header {
  531.     top: 0px !important;
  532. }
  533.  
  534. videowrapper controls,
  535. videowrapper header {
  536. 	opacity: 1;
  537. }
  538. videowrapper.playing controls,
  539. videowrapper.playing header {
  540. 	opacity: 0;
  541. }
  542. videowrapper controls:hover, videowrapper.showui controls, videowrapper.paused controls, videowrapper.audiomode controls,
  543. videowrapper header:hover, videowrapper.showui header, videowrapper.paused header, videowrapper.audiomode header {
  544. 	opacity: 1;
  545. }
  546. videowrapper button, videowrapper label {
  547.     line-height: 32px !important;
  548.     position: absolute !important;
  549.     bottom: 0px !important;
  550.     background-color: none !important;
  551.     font-size: 18px !important;
  552.     height: 32px !important;
  553.     border: none !important;
  554.     margin: 0 !important;
  555. }
  556. videowrapper button {
  557.     width: 32px !important;	
  558.     padding: 0 !important;
  559. }
  560. videowrapper input[type=range] {
  561.     line-height: 32px !important;
  562.     position: absolute !important;
  563.     background-color: var(--range-background-color) !important;
  564.  
  565.     bottom: 10px !important;
  566.     height: 10px !important;
  567.     border: none !important;
  568.     margin: 0px !important;
  569.     border-radius: 6px !important;
  570.     -webkit-appearance: none !important;
  571. }
  572. videowrapper input[type='range']::-webkit-slider-thumb {
  573.     -webkit-appearance: none !important;
  574.     background-color: var(--controls-color);
  575.     border: none;
  576.     height: 16px;
  577.     width: 16px;
  578.     border-radius: 50%;
  579. }
  580.  
  581. videowrapper.audiomode video:-webkit-full-page-media {
  582.     width: 600px;
  583. }
  584. videowrapper:before {
  585.     content: attr(data-osd);
  586.     position: absolute;
  587.     left: 50%;
  588.     top: calc(50%);
  589.     color: white;
  590. 	-webkit-text-stroke: 3px #333333;
  591.     font-size: 64px;
  592. 	font-weight: bold;
  593.     font-style: normal;
  594.     z-index: 1;
  595.     transform: translate(-50%, -50%);
  596.     pointer-events: none;
  597. 	opacity: 0;
  598. }
  599. videowrapper.audiomode:before, 
  600. videowrapper.showosd:before, 
  601. videowrapper.paused:before {
  602. 	opacity: 1;
  603. }
  604. videowrapper label {
  605.     right: 0;
  606.     min-width: 100%;
  607.     text-align: left;
  608.     box-sizing: border-box;
  609. 	width: 100% !important;	
  610.     padding: 0px 8px !important;
  611. }
  612. `;
  613.  
  614. function init() {
  615. 	if (videowrapper_init) {
  616. 		console.log("Cannot init_videowrapper twice!");
  617. 		return;
  618. 	}
  619. 	videowrapper_init = true;
  620. 	
  621. 	if (typeof GM_addStyle != "undefined") {
  622. 	  GM_addStyle (stylesheet);
  623. 	} else {
  624. 	  var css = document.createElement("style");
  625. 	  css.type = "text/css";
  626. 	  css.innerHTML = stylesheet;
  627. 	  document.head.appendChild(css);
  628. 	}
  629.  
  630. 	init_videowrapper();
  631. 	if (typeof unsafeWindow != "undefined") {
  632. 	  unsafeWindow.init_videowrapper = init_videowrapper;
  633. 	}
  634. }
  635.  
  636. init();