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.
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!