HTML5 Video Player logo
HTML5 Video Player for Mac and Windows

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://www.html5videoplayer.net/videos/toystory.mp4" type="video/mp4" />
<source src="http://www.html5videoplayer.net/videos/toystory.ogv" type="video/ogg" />
<source src="http://www.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:

download html5 video player

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.

,

Comments are currently closed.