Quick Tip: HTML5 Video with a Fallback to Flash

In this video quick tip, we'll review how to work with HTML 5 video in your own projects. Because older browsers and Internet Explorer do not understand the <video> element, we must also find a way to serve a Flash file to viewers who are utilizing those browsers.

Viewing Options

Screenr (Mp4)

Unfortunately, much like HTML 5 audio, Firefox and Safari/Chrome don't quite agree when it comes to the file format for videos. As such, if you wish to take advantage of HTML 5 video at this time, you'll need to create three versions of your video.

.OGG: This will make Firefox happy. You can use VLC (File -> Streaming/Export Wizard) to convert your video to this format easily.
.MP4: Many screencasting tools automatically export to Mp4; so you can use that file for Safari and Chrome.
.FLV/.SWF: Not all browsers support HTML 5 video, of course. To compensate, make sure that you add a fallback Flash version as well.

<!DOCTYPE html>

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
	<title>untitled</title>
</head>
<body>
<video controls width="500">
	<!-- if Firefox -->
	<source src="video.ogg" type="video/ogg" />
	<!-- if Safari/Chrome-->
	<source src="video.mp4" type="video/mp4" />
	<!-- If the browser doesn't understand the <video> element, then reference a Flash file. You could also write something like "Use a Better Browser!" if you're feeling nasty. (Better to use a Flash file though.) -->
	<embed src="http://blip.tv/play/gcMVgcmBAgA%2Em4v" type="application/x-shockwave-flash" width="1024" height="798" allowscriptaccess="always" allowfullscreen="true"></embed>
</video>
</body>
</html>

There are a handful of attributes available to the <video> element.

Controls: Display the play/stop buttons?
Poster: The value can be a path to an image, that will serve as the display of the video before it is played.
AutoPlay: Immediately play the video when the page is loaded?
Width: The desired width of the video. By default, the browser will automatically detect the dimensions of the supplied video.
Height: The desired height of the video.
Src: The path to the video file. It's better to use the <source> child element instead for this task.

Dos and Don'ts of HTML 5 Video

DO create three version of your video to make Firefox, Safari/Chrome, and IE happy. (.ogg, .mp4, .flv/.swf)
DO NOT omit one of these formats. Unfortunately, you can't easily choose to serve HTML 5 video to Firefox, and the Flash fallback to Safari. Safari understands the <video> element, and will expect to find a suitable video format to load. If one is not found, it will display an empty player.
DO keep in mind that full-screen support will not work in Safari and Chrome. However, with the release of Firefox 3.6, you can right-click, and view in full screen.
DO remember that the reason why IE loads the Flash file instead is because it does not understand what the <video> element is. However, if a browser DOES understand that element, it will expect to find a suitable file to load.

Please note that, if I can find a suitable work-around for the full-screen problem, we'll be using this method on Nettuts+ in the near future!