Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

Video Player Custom Controls Programming Tutorial

In this first part of the tutorial series we will discuss how to set up a custom controls interface starting with the play/pause button. Customizing the HTML5 video controls interface will allow you to achieve a unique and constant look for your video player in all browser software. Different browser software display different looking default controls for the video element. You can also offer your custom programmed video players to others to use on their websites if they also do not want to use the stock controls that are native to browser software for the video element. We use JavaScript to control the video after we remove the default controls. We used to do very similar things in Flash AS3 if you remember. We are going to begin with disabling the default control bar and setting up our own control bar design using a DIV that we can place all of our video controls into as we create them. In this part 1 we will add a play/pause button to the control bar, then in the videos that follow we will customize more aspects of video control interfacing. <!DOCTYPE html> <html> <head> <style> div#video_player_box{ width:550px; background:#000; margin:0px auto;} div#video_controls_bar{ background: #333; padding:10px;} </style> <script> function playPause(btn,vid){ var vid = document.getElementById(vid); if(vid.paused){ vid.play(); btn.innerHTML = "Pause"; } else { vid.pause(); btn.innerHTML = "Play"; } } </script> </head> <body> <div id="video_player_box"> <video id="my_video" width="550" height="300" autoplay> <source src="Tom_and_Jerry.mp4"> </video> <div id="video_controls_bar"> <button id="playpausebtn" onclick="playPause(this,'my_video')">Pause</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