HTML5 is going to be the new norm here soon. If you don’t know what I’m talking about, dont worry about it too much. Its the background structure / protocol running web pages. Firefox, Safari, Opera & Google Chrome are all HTML5 ready on some level. IE 6, 7, 8 are not. Rumor is the IE 9 will be. But I’m not holding my breath.
One of the big new laws in html 5 is the way a website can interact with video. We can now use a more native video format, that streams better on browsers and mobile devices. YES ipad & iphone (and other mobiles) can use the new HTML5 video.
HTML5 video will eliminate the need for flash on most devices.
So lets create a smooth video splash page for a product or service promotion. We’ll start with a simple design, and then move onto the video part.

Design

Sticking with a simple design. We want to center our video, and give it a nice frame.
The Base Html:

  
  
  


          

               
Video Demo
               


               
               
Enter site
          

and our basic css:

body {
	margin: 0;
	padding: 0;
	font-family: Helvetica, Arial, Sans-serif;
	background: url(bg_body.jpg) repeat-x #111;
	color: #ccc;}
#wrapper {
	width:680px;
	margin: 0 auto;
	padding: 20px;
	text-align: center;}
#video {
	width: 640px;
	height: 300px;
	}
a, a:visited {
	color: #22daff;}
a:hover {
	color: #d1d1d1;}
	h1 {text-shadow: 1px 2px 1px #111; color: #eee; font-size: 4em;}

Video conversion

Here is my biggest gripe against html5 video. Each browser has their own video type. Safari: mp4, Firefox, OGV, and Chrome: WebM. Kind of a pain to convert your video to 3 formats, but in general it is a better experience for the end user right? so we’ll suck it up and deal with it.
So whats the easiest way to convert to these file types? I have tried a few ways, and thus far has been Miro Video Converter. Works on both mac and PC. mirovideoconverter.com. And best of all, its free. I used this to convert all of my videos.

Video player options

Sure html5 can take the new video symantic tag. But it doesnt leave the most consistent user experience. Then what about those lowly IE users? we can’t ignore them. We may want to, but we can’t.
There are a handful of opensource javascript and css players. They players make it nice and easy to auto detect the browser type, and deliver the best video possible. Some even offer a flash drop out for the worst case IE users.
Some options include:
Video for everybody: http://camendesign.com/code/video_for_everybody
Video JS: http://videojs.com
Sublime: http://jilion.com/sublime/video
Projekktor: http://www.projekktor.com/
Each essentially adds a layer of functionality and style to the html5 video tag. I liked Video JS for this use.

Prepping you server for the video

This is a super important step. Not all servers will recognize the mime types of videos. Using a simple htaccess file, we can add these three simple lines to indicate the file mime types.

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

Pulling it together

1. Download the Video JS codes, and upload the files to your server.
2. Insert the necessary codes for the CSS and JS into your files head tag.
3. insert their player codes into your video div
4. Modify the file paths to your videos for each file type.
5. update the flash var source for the back up video, making sure you use a absolute full url.

Save and test!

Here is my final result, http://proofs.factor1studios.dev/mediasalt/video/ with the videos playing in native formats for Firefox, Safari, and Chrome, with IE dropping to a flash swf fall back.
So now you don’t have an excuse to not be producing great video splash pages or video on your site, with full support for all browsers, and mobile devises.