One of the many great new additions is the video tag. Yet this confuses people because they are not sure how to use it. To understand how to use the tag you must understand what video formats browsers use and support. Safari and Chrome use H.264 (MPEG-4), Firefox supports the Ogg Theora codec, and currently IE8 and below doesn't even support the tag but will in IE9. This leaves a problem. How can you add a video that will play in all browsers. First lets learn how to use the tag.
This your basic syntax:
<video src="video_file.mp4">
Sorry, your browser cannot display this video
</video>
To solve the problem between Safari/Chrome and Firefox you can modify the syntax like this:
<video>
<source="video_file.mp4" type="video/mp4" />
<source="video_file.ogv" type="video/ogg" />
Sorry, your browser cannot display this video
</video>
This will display the video in each browser that supports it, but currently it will sit on the first frame with no way for the user to start or watch the video. To do that we must either add controls or make the video play automatically (or both). It would be also wise to auto buffer the video before playing. If you have multiple videos on one page, I would avoid auto buffering.
<video controls="controls" autoplay="true" autobuffer="true">
</video>
For IE, you will have to figure out what browser they are using with either a server language or javascript and then display a flash version of your video.
The nice thing about the video tag is that since it is HTML, it can be styled with CSS to personalize it they way you need to match your site and needs. The video tag is a block-level element so keep that in mind as you style it. As an added note, since you are using HTML5, why not try using some CSS3 to style it such as rounded corners and drop-shadows.
This should be interesting...