FULL STACK   ·   UI   ·   UX   ·   GRAPHICS   ·   DEVELOPER   ·   INSTRUCTOR

Adam Khoury

Donate funds to show love and support

Click the button below to donate funds securely online. You can use your PayPal account or a credit card.

Your donations help free up my time to produce more content and assist in covering server costs. It's also a great way to say thanks for the content!

Application Configuration

Adam will be adding options here soon.

Video Full Screen Toggle Custom Player Controls Tutorial

Published :
Author :
Adam Khoury
In this part of the series we are adding a full screen button to our HTML custom video player by using a JavaScript method called requestFullScreen(). This is all experimental technology until some new JavaScript methods become standardized. Many HTML5, JavaScript and CSS3 modules are still undergoing development by various browser vendors. <!DOCTYPE html> <html> <head> <style> div#video_player_box{ width:550px; background:#000; margin:0px auto;} div#video_controls_bar{ background: #333; padding:10px; color:#CCC;} input#seekslider{ width:180px; } input#volumeslider{ width: 80px;} </style> <script> var vid, playbtn, seekslider, curtimetext, durtimetext, mutebtn, volumeslider, fullscreenbtn; function intializePlayer(){ // Set object references vid = document.getElementById("my_video"); playbtn = document.getElementById("playpausebtn"); seekslider = document.getElementById("seekslider"); curtimetext = document.getElementById("curtimetext"); durtimetext = document.getElementById("durtimetext"); mutebtn = document.getElementById("mutebtn"); volumeslider = document.getElementById("volumeslider"); fullscreenbtn = document.getElementById("fullscreenbtn"); // Add event listeners playbtn.addEventListener("click",playPause,false); seekslider.addEventListener("change",vidSeek,false); vid.addEventListener("timeupdate",seektimeupdate,false); mutebtn.addEventListener("click",vidmute,false); volumeslider.addEventListener("change",setvolume,false); fullscreenbtn.addEventListener("click",toggleFullScreen,false); } window.onload = intializePlayer; function playPause(){ if(vid.paused){ vid.play(); playbtn.innerHTML = "Pause"; } else { vid.pause(); playbtn.innerHTML = "Play"; } } function vidSeek(){ var seekto = vid.duration * (seekslider.value / 100); vid.currentTime = seekto; } function seektimeupdate(){ var nt = vid.currentTime * (100 / vid.duration); seekslider.value = nt; var curmins = Math.floor(vid.currentTime / 60); var cursecs = Math.floor(vid.currentTime - curmins * 60); var durmins = Math.floor(vid.duration / 60); var dursecs = Math.floor(vid.duration - durmins * 60); if(cursecs < 10){ cursecs = "0"+cursecs; } if(dursecs < 10){ dursecs = "0"+dursecs; } if(curmins < 10){ curmins = "0"+curmins; } if(durmins < 10){ durmins = "0"+durmins; } curtimetext.innerHTML = curmins+":"+cursecs; durtimetext.innerHTML = durmins+":"+dursecs; } function vidmute(){ if(vid.muted){ vid.muted = false; mutebtn.innerHTML = "Mute"; } else { vid.muted = true; mutebtn.innerHTML = "Unmute"; } } function setvolume(){ vid.volume = volumeslider.value / 100; } function toggleFullScreen(){ if(vid.requestFullScreen){ vid.requestFullScreen(); } else if(vid.webkitRequestFullScreen){ vid.webkitRequestFullScreen(); } else if(vid.mozRequestFullScreen){ vid.mozRequestFullScreen(); } } </script> </head> <body> <div id="video_player_box"> <video id="my_video" width="550" height="310" autoplay> <source src="Tom_and_Jerry.mp4"> </video> <div id="video_controls_bar"> <button id="playpausebtn">Pause</button> <input id="seekslider" type="range" min="0" max="100" value="0" step="1"> <span id="curtimetext">00:00</span> / <span id="durtimetext">00:00</span> <button id="mutebtn">Mute</button> <input id="volumeslider" type="range" min="0" max="100" value="100" step="1"> <button id="fullscreenbtn">[ &nbsp; ]</button> </div> </div> </body> </html>