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.

For this tutorial, you will need to have a browser that supports HTML5 video (FireFox, Chrome, or IE 9 or higher), 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. All three major browsers now support H.264 MP4, while Firefox and Chrome also support Ogg Theora and WebM.

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

• MiroVideoConverter - GUI based H.264 MP4, Ogg Theora, and WebM converter for Windows and Mac.
• SUPER - GUI based H.264 MP4, Ogg Theora, and WebM 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 types in Apache, add the appropriate lines to your .htaccess file:

HTML for the Video Tag

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

<video src="video.mp4" 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.mp4" 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:

Pause Play Back to Beginning Skip 5 Seconds

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.mp4" 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 The Video Element at WHATWG, as well as the Mozilla developer documentation.

Back to Tutorials