HTML5 Video Controls

HTML5 uses the new < video > to specify video, such as a movie clip or other video streams. Along with this new video tag in HTML5, there are some new attributes to control how the HTML5 video displays on the web. One of the most important HTML5 video control element is the controls attribute for HTML5 video.

HTML5 Video Controls attribute

The controls attribute is a boolean attribute, and can be set in the following ways:

• <video controls>
• <video controls=”controls”>
• <video controls=””>

The controls attribute is a boolean attribute. When present, it specifies that video controls should be displayed.

HTML5 video controls should include:

• Play
• Pause
• Seeking
• Volume
• Fullscreen toggle
• Captions/Subtitles (when available)
• Track (when available)

HTML5 video controls code

A sample HTML5 video controls code as bellow:

<video width="640" height="360" controls>
<source src="http://html5videoplayer.net/videos/toystory.mp4" type="video/mp4" />
<source src="http://html5videoplayer.net/videos/toystory.ogv" type="video/ogg" />
<source src="http://html5videoplayer.net/videos/toystory.webm" type="video/webm" />
</video>

See a live demo of HTML5 video with controls here.

Want to make your own HTML5 videos and check it out by yourself? Download the HTML5 player bellow:

HTML5 video controls tips:

You may get conceptually different UI than desktop browsers if you browse your html5 video from mobile devices due to their touch controls, small screens and hardware buttons. Also the built-in browser controls are different too. Check out bellow table from http://ww.longtailvideo.com.

Browser		Controls visible
Firefox 8		idle, hover
Firefox 11		idle, hover
Chrome 15		idle, hover, paused
Safari 5.1		idle, paused, hover 2
Internet Explorer 9		hover
Opera 11.5		idle, paused, hover
iOS 4 (iPod Touch 4)		paused, touch
iOS 5 (iPad 1)		paused, touch
Android 2.2 (HTC Legend)		– 5
Android 2.3 (HTC Desire)		idle, touch
Android 4.0 (Galaxy S2)		idle, touch 6
WinPho 7.5 (Lumia 800)		paused, touch

1. Elapsed time is displayed as “tool tip” on seek bar.
2. Before playback starts, most of the controls are missing.
3. Both are shown to the right of the seekbar.
4. A “play” icon is shown in the display
5. With no controls when idle and no display click, it’s impossible to start a video!
6. After controls fade out in “windowed” mode, they don’t appear anymore. Bug?
7. Only in fullscreen mode, not in windowed mode.