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
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!
"
No comments:
Post a Comment