Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

Video Full Screen Toggle Custom Player Controls Tutorial

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>
thumb

JavaScript Videos

Video Programming

Video Player Custom Controls Programming TutorialVideo Seek Controls Programming TutorialVideo Duration and Current Play Time Programming TutorialVideo Volume Change and Mute Programming TutorialVideo Full Screen Toggle Custom Player Controls TutorialVideo Player Controls CSS Design Tutorial