Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

Video Player Controls CSS Design Tutorial

6th and final part of customizing the HTML video controls. In this video we will show some design tips for customizing the video player to match your specific brand or site design. I want to remind everyone that HTML5, CSS3 and some JavaScript functionality cannot yet be depended on to work in all browser software the same. Once these technologies are standardized you can then depend on them to work across the board. Old browsers will most certainly not handle this code well, so we will discuss using browser prefixes and alternatives to the range slider component. <!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; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;} button#playpausebtn{ background:url(pause.png); border:none; width:16px; height:18px; cursor:pointer; opacity:0.5; } button#playpausebtn:hover{ opacity:1; } input#seekslider{ width:180px; } input#volumeslider{ width: 80px;} input[type='range'] { -webkit-appearance: none !important; background: #000; border:#666 1px solid; height:4px; } input[type='range']::-webkit-slider-thumb { -webkit-appearance: none !important; background: #FFF; height:15px; width:15px; border-radius:100%; cursor:pointer; } </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.style.background = "url(pause.png)"; } else { vid.pause(); playbtn.style.background = "url(play.png)"; } } 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"></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