HTML5 Video Tag Tutorial

HTML5 Video

This tutorial demonstrates how to use the HTML5 video tag to embed video in a web page without the use of a browser plug-in. It will also show how to use JavaScript to control the playback of the video.

The HTML5 video tag has several advantages over Flash. For example, it is supported on mobile platforms such as the Apple iPhone that don't support Flash. Also, it alleviates the need for users to install yet another browser plug-in just to play video.

As of this writing, major browser support for the video tag is limited to Mozilla Firefox 3.5 or higher, and Google Chrome 3.0 or higher. Internet Explorer 8 does not support the video tag (that is, without the use of Google Chrome Frame), though it will reportedly be supported in the upcoming IE 9.

For this tutorial, you will need to have a browser that supports HTML5 video, as well as a video file to embed.

Video Format

There is still debate amongst browser vendors and web developers as to which, if any, video format should be the standard format for HTML5 video. Currently, both Firefox and Chrome support the Ogg Theora format, while Chrome supports H.264 MP4 and Firefox does not. Meanwhile, Microsoft has indicated a preference for supporting the H.264 MP4 format in IE 9.

Most video files can be converted to these formats using one of the following free tools:

• MiroVideoConverter - GUI based Ogg Theora and H.264 MP4 converter for Windows and Mac.
• SUPER - GUI based Ogg Theora and H.264 MP4 converter for Windows.
• ffmpeg2theora - Command line Ogg Theora converter for Windows, Mac, and Linux.

MIME Types

First, make sure your web server is returning the correct MIME type for the video format that you are using. If the correct MIME type isn't being returned, the video tag will not work.

To add the MIME type for Ogg Theora video in Apache, add the following line to your.htaccess file:

AddType video/ogg ogv

And for H.264 MP4 video, add the following line:

AddType video/mp4 mp4

HTML for the Video Tag

The video tag itself is incredibly simple. The following HTML code will embed a video with standard playback controls built into the video element:

<video src="video.ogv" controls>
	Your browser does not support HTML5 video.
</video>

The "src" attribute specifies the video file to play, and the "controls" attribute indicates that the browser should provide its own playback controls. Any content inside the video tag will be rendered in browsers that do not support HTML5 video.

The result looks like this:

Additionally, the "autoplay" attribute can be used to make the video start to playing automatically, and the "loop" attribute will make the video play continuously in a loop.

Using JavaScript to Control HTML5 Video

Many features of the video tag can be automated using JavaScript. The following example code demonstrates how to use JavaScript to play, pause, and seek the video.

<video src="video.ogv" id="v">
	Your browser does not support HTML5 video.
</video>
<p>
<button onclick="document.getElementById('v').pause()">
	Pause</button>
<button onclick="document.getElementById('v').play()">
	Play</button>
<button onclick="document.getElementById('v').currentTime = 0">
	Back to Beginning</button>
<button onclick="document.getElementById('v').currentTime += 5">
	Skip 5 Seconds</button>
</p>

The pause() and play() methods are self-explanatory. The currentTime property returns the current playback location in seconds. Setting the currentTime property will result in the video seeking to the specified location.

This is the result:

   

HTML5 Video Events

It is also possible to respond to various HTML5 Video events using JavaScript. The following example listens for the "ended" event in order to display an alert box when playback of the video completes.

<video src="video.ogv" id="ve" controls>
	Your browser does not support HTML5 video.
</video>
<script>
var ve = document.getElementById('ve');
if(ve != null && ve.addEventListener) {
	ve.addEventListener(
		'ended', 
		function() { 
			alert('The video has ended.');
		}, 
		false);
}
</script>

And the result:

For more information about the HTML5 video interface, check out the W3C Working Draftand Mozilla developer documentation.