Custom HTML5 Video Controller

HTML5 video controller allows user to interact with your embedded video just like YouTube video player allows you to start, pause and end video playing. 

HTML5 video controller allows you to add start, pause and end video buttons. However, these buttons are very plain and may not feet overall design of your HTML5 web page. 

Thankfully, HTML5 goes extra mile by allowing us to control the appearance of these buttons on the form. 

First, let us look at the regular video tag that allows us view video file on HTML5 compatible browser.

        <video width=400"     height="200"     src="myVideoFile.mp4"     controls />

Browsers render this video tag differently based on the browser type and version. We can override this undesired behavior and make sure that our video control is rendered the same on all browsers. Let’s see how we can use HTML5 to accomplish this task. 

First, you need to use HTML5 media attributes and DOM events. For example, there several important attributes that we’ll need while building custom video controller.

  • media.paused
  • media.defaultPlaybackRate
  • Media. playbackRate
  • media.ended
  • Media.volume
  • Media.muted
  • Media.currentTime

These attributes are all very important for our JavaScript code that will use them to modify the way date and time control looks and behaves.

Example of this JavaScript code is below:


        if      (video.paused)




                  else if      (video.ended)


        video.currentTime=10; //Sets position from which to      stat video playing.




Here is complete example in HTML5 and JavaScript and you can use as your boilerplate for coding your own custom video control.

        <!DOCTYPE html>



                <title>Custom HTML5 my_video Control     </title> 

                <script     type="text/javascript"> 

        var      my_video; 

        window.onload = function()


            my_video =      document.getElementsByTagName("video")[0]; 

                var btnPlay = document.getElementById("btnPlay");

                var btnPause = document.getElementById("btnPause");

                var btnMute = document.getElementById("btnMute");

                var btn_btnVolume = document.getElementById('btnVolume'); 

                btnPlay.addEventListener('click', doVideoPlay, false);

            btnPause.addEventListener('click', doVideoPause,      false);

            btnMute.addEventListener('click', doVideoMute,      false);

            btn_btnVolume.value =      my_video.btnVolume;






            if (myVol==0)    


               my_video.muted = true;                




               my_video.muted = false;


                            return     false;

            }, true);



        function doVideoPlay()


            if (video.paused)




            else if (video.ended)







        function doVideoPause()


            if (






        function doVideoMute()


               nbsp;document.getElementById('btnVolume').value      = 0;

            my_video.muted = true;





                    <video     width="400"     height="200"     src="myVideoAudioFile.mp4"     />

                    <button     id="btnPlay">Play</button>

                    <button     id="btnPause">Pause</button>

                    <input     type="range"     min="0"     max="2"     step="0.2"     id="btnVolume">

                    <button     id="btnMute">Mute</button>



Featured pages


Learn about HTML5 architecture, design principles and patterns on HTML5 Overview Tutorial. Become …


Learn about HTML5 tags and discover a new list of HTML5 tags. Find out about HTML5 tags support by…


 Learn HTML5 development techniques, tips and tricks on our website. Find out what is required…

Date Time Picker

HTML5 forms use date and time controls regularly. HTML5 date and time controls are used by booking …