The first task of this section was quite a lengthy one, which was necessary so that we could add in the base framework required to display the video using our custom player. It's now time to add in the code for the custom controls—this will provide the framework for the play and pause buttons, as well as a slider for seeking, and a button for controlling the volume.
Open up the
videoplayer.htmlfile saved from the previous task, and add in the following code below the</video>closing tag. We start with the play, pause, and time slider placeholder elements:<div class="custom_controls"> <a class="play" title="Play"></a> <a class="pause" title="Pause"></a> <div class="time_slider"></div>
We then continue with the time placeholder elements:
<div id="time"> <span class="timer">00:00:00</span> / <span class="duration">00:00:00</span> </div>
We finish with the volume control element:
<div class="volume"> <div class="volume_slider"></div> <a class="mute" title="Mute"></a> <a class="unmute" title="Unmute"></a> </div> </div>
If we are using the <video> tags in HTML, then the browser will provide its own set of controls. However, as seen in the previous section, these controls will differ depending on which browser is used—they will not all be the same. The purpose of this section is to begin to create our own controls, so that we can provide a consistent appearance, no matter which browser you use to view the videos. There will be scope for you to add additional ones once you get more familiar with building players. A good example is the ability to show an icon that changes depending on what position the volume control has been set.