HTML5 Video Controls

What is HTML5 Video Controls

The HTML5 Video Controls <video> element specifies a standard way to embed adding a video player to your webpage. HTML5 introduces built-in media support via the video and audio, video element is done with a single line of HTML, add the controls attribute, and users can control the video playback. One of my favorite things about HTML5 video is how easy it is to create your own custom controls.

In its most basic form, other attributes enable you to set the source file, add a placeholder image, or start playing the video automatically and noticed that the customizations were lost when the video went into full screen. Before HTML5, plugins were the only way to view streaming video on the internet. When present, it specifies that video controls should be displayed.  Now that HTML5 video is becoming more popular, custom controls

Video controls should include:

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

Defines HTML5 Video Tags

  • <video>
  • <source> Defines multiple media resources for media elements, such as <video> and <audio>
  • <track>

Support Video – Media Types

  • MP4      –    video/mp4
  • WebM    –    video/webm
  • Ogg          –    video/ogg

How to use Element ot HTML <video>

Example

<video width=”320″ height=”240″ controls>
<source src=”movie.mp4″ type=”video/mp4″>
<source src=”movie.ogg” type=”video/ogg”>
Your browser does not support the video tag.
</video>

Result

Browser Support version that fully supports the attribute.

  • Chrome 4.0
  • Internet Explorer 9.0
  • Mozilla 3.5 .
  • Safari 4.0
  • Opera 10.5

Get the more Information here