HTML5 Video Element

html5-video
Until now, there has not been a standard for showing a video/movie on a web page.
Today, most videos are shown through a plug-in (like flash). However, different browsers may have different plug-ins and it all gets a little complicated.
HTML5 defines a new element which specifies a standard way to embed a video/movie on a web page using the <video> element.
Browser Support
Browser support is nearly there with Internet Explorer 9+, Firefox, Opera, Chrome, and Safari all supporting the element. (Internet Explorer 8/7/6 don’t)
The Code
To insert an HTML5 video in to a web page all the code you will need is this:

<video width=”320″ height=”240″ autoplay controls loop poster=”/images/w3html5.gif”>
<source src=”movie.mp4″ type=”video/mp4″>
<source src=”movie.ogg” type=”video/ogg”>
<source src=”movie.webm” type=”video/webm”>
Your browser does not support the video tag.
</video>

Creating the file types
The file types are .mp4 .ogg and .webm and can be created very easily in to each format using the free video converter software Miro (get it here). There are 3 different types to ensure all browsers can play the video. (for example Firefox needs the .ogg format, Safari and Chrome both use the .mp4 format)
Options
There are a few options you can turn on or off when inserting a video including:

  • “controls” – this (if included in the first line) adds the standard set of video controls (play, pause, rewind etc) without including this, your video will have not controls.
  • “loop” – add this in the same line and the video will loop
  • “autoplay” – add this and the video will play as soon as it loads
  • “poster” – this attribute is an image you can display to the user while the video is loading (not required)
  • For full DOM reference see this

Example
Here is an example of an HTML 5 video on one of our Case Studies.

Written by Craig Farrall