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 |
- Elapsed time is displayed as “tool tip” on seek bar.
- Before playback starts, most of the controls are missing.
- Both are shown to the right of the seekbar.
- A “play” icon is shown in the display
- With no controls when idle and no display click, it’s impossible to start a video!
- After controls fade out in “windowed” mode, they don’t appear anymore. Bug?
- Only in fullscreen mode, not in windowed mode.
Common HTML5 Mistakes to Avoid HTML5 Video Gallery Templates
Comments are currently closed.