HTML5 and the Video Tag

This week I have been stressing about embedding videos in HTML 5 using a cross-browser compatible solution that conforms to the latest mark-up guidelines.  After looking around at multiple resources, it became apparent that the current browser usage patterns require at least one fallback option in order to include all the different mobile devices, and older browsers still in use by a large segment of the population.  Instead of using a large variety of different video file formats (since this is often not practical, especially for user supplied content) it becomes necessary to use javascript to detect which browser is being used, and then supply the correct video options for that browser.  A quick google search will immediately return many existing libraries out there that do just that!  After looking at many of them, I decided to move forward using VideoJS because it has a simple API, and a flexible theming system.  The default themes are also already quite nice.

The next step is to figure out what video file format you plan on making the standard for your site.  As a novice of video editing and formatting I found this to be a bit confusing at first.  Here is a fantastic tutorial I came across.  It both explains the video format / codec issue, as well as coming to the same conclusion that using MP4 files coded as H.264 combined with a javascript library is the most flexible way to go without using multiple video files for each video: