HTML5 Video

Been finally getting some code wet with HTML5, especially after reading HTML5 For Web Designers by Jeremy Keith. Below is a video of Santucci during Christmas of ’09, using the new video element.

The Video

Within the video element, two video files are served up: .MP4 for the latest versions of Safari and Chrome, .OGV for the latest versions of Firefox and Opera. Latest versions supported are listed here.

Unfortunately, if you are using Internet Explorer, you won’t see this video. I could have been a saint and created a Flash version, but I wasn’t feeling Flashy at the time.

Poster Attribute

The poster attribute is very cool and allows you to put a placeholder image for the video, as shown with Santucci above. This allows for some beautiful web design, as opposed to the typical middle frame image that YouTube displays.

File Types And What Is Going On With Them

Unfortunately, there isn’t a single video file type that all browsers can display. So, you have to serve up a series of video files for the video element to display, depending on the browser. For Safari and Chrome, you serve up a .MP4 file. For Firefox and Opera, you dish out a .OGV file. For Internet Explorer 7 and 8, you have a Flash version ready or an embedded YouTube, Vimeo, Viddler or other 3rd party hosting file embedded and ready to showcase.

So, yeah, that’s a lot of versions to make just to play a video in all modern browsers. Kind’ve sucks, I know.

Hosting Hurdle

You may need to alter your .htaccess file to allow your server to play .OGV files.

With my BlueHost.com hosted site, I had to add the following to .htaccess: AddType application/ogg .ogv

Creating A .OGV File On The Mac

If you were like me and never heard of a .OGV file, you may be wondering how the hell to create a such a file. Well, if you use iMovie on a Mac, you can export to an MP4 video file. Then, to create a .OGV, download and install a free app called ffmpeg2theora that allows you to just drag a movie file into the Terminal after a command line of: ffmpeg2theora. Trying to convert a QuickTime .MOV file doesn’t work with this method though.

Firefogg

With the Firefox browser, you can use the Firefogg Make Web Video plugin. This will connect you to the online app that allows you to simply upload a file and export it as an .OGV file. Again, QuickTime .MOV could not be converted with this app.

Mobile Browsers

I noticed that the HTML5 videos were not working at all on my iPhone 3s or my first generation iPad. Adding an .M4V version of the video, which you can easily make with QuickTime, solved the iPad problem, but not the iPhone problem.

According to this video, if you want to shell out $30 bucks to buy QuickTime Pro, you can make a version of the .MP4 that works on the iPhone.

Vimeo Version

You Internet Explorer people can watch this version:

[vimeo]http://vimeo.com/13349294[/vimeo]

This the first time I’m using the “thumb” option with Vimeo, which allows you to add a placeholder image, or a “poster” image to display before the visitor starts. YouTube still doesn’t have this feature.