Making HTML5 video with controls

Before HTML5, plugins were the only way to view streaming video on the internet. Now that HTML5 video is becoming more popular, custom controls are more popular. We’ll take you through a few options when adding controls on your embedded videos.

To get started, use the basic code for an HTML5 WebM video with inbuilt controls:

<video src=”SampleVideo.webm” controls>
</video>

By using the controls attribute in your code, you’re specifying a minimal set of controls that each user will see. The interface might look different, depending on the browser. However, the controls should at least include Play, Pause, and a Volume. These are the default buttons expected by users. It can also display Captions, Tracking, Seeking, and a Fullscreen toggle.

If you’d like to customize the visual style of the controls, CSS is one way to handle it. For example, you can use the following Div tag examples in your code:

<Div id=”PlayButton” class=”VideoCtrls”>Play</div>
<Div id=”PauseButton” class=”VideoCtrls”>Pause</div>
<Div id=”MuteButton” class=”VideoCtrls”>Muse</div>

These tags, along with a well written style sheet, can change the and look and feel of the video controls to match the theme of your website. Small visual elements like these can complete a theme, resulting in a consistent experience for the end user.

This is one small example of the possibilities HTML5 video makes available to developers. If you’d like to try this format for yourself, check out EasyHTML5Video as it is a great converter of html5 video with controls.