While it's great that video hosting services like Vimeo and YouTube support HTML5 and that solutions for larger sites are available from places like Encoding.com and Brightcove, that still leaves users who want to host their own video content -- but don't necessarily use a platform like Brightcove -- in a bit of a predicament. After all, in a perfect world, everyone who visits a website should be able to view video, whether they are on a desktop or on an iPhone.
Fortunately, there are a number of great free tools available that will let you serve video via HTML5 and also support Flash, in the event that a visitor's browser doesn't support HTML5 (or in some cases, the video codec being used with your HTML5 code).
Here are a few of the solutions currently available that we particularly like:
LongTail Video recently released a beta release for the JW Player for HTML5. The JW Player is currently one of the most popular open source video solutions on the web and the new version offers seamless fallback support for JW Player for Flash.
This is important for developers or designers who want to make sure that no matter what browser is being used (even IE6), video will be watchable.
JW Player for HTML5 uses jQuery and supports playback of H.264, Theora and FLV video. It also supports existing JW Player and PNG skins.
JW Player for HTML5 is just entering beta but we expect that it will soon be integrated into a number of different platforms (like WordPress) and that it will continue to evolve quickly.
2. Kaltura HTML5 Video Solution
Kaltura is another open source video solution with an HTML5 player and library. Already in use by Wikimedia (the Wikipedia people), the JavaScript library is built on jQuery and jQuery UI which means that the look and feel will be very easy to customize.
Kaltura supports OGG, H.264, FLV and MOV formats and is designed to work across browsers and fallback to Flash if necessary.
Kroc Camen's Video for Everybody was one of the first cross-browser HTML5 video solutions on the web. Although more players have entered the ring, it remains a great contribution and is extremely useful.
One of the unique aspects of Video for Everybody is that it does not use JavaScript. This is important for accessibility standards or for playback in applications, like RSS readers, that might not support JavaScript.
The code is pretty simple -- if a browser supports HTML5, that's what is played. If a browser doesn't support HTML5, Adobe Flash is used. You can locally host the Flash file or embed an existing file, like a YouTube clip, for instance. There is a deprecated version that can also try to fallback to QuickTime before playing Flash.
Worst case scenario, a placeholder image and a video download link is shown.
WordPress users can use the External Video for Everybody plugin by Kevin Wiliarty for easy integration with their WordPress blogs.
The Open Standard Media Player (OSM) bills itself as an all-in-one media player for the web. It's licensed under the GPL v3 and is written in jQuery to support HTML5 as well as Flash and Flash-based sites like YouTube and Vimeo.
It can be used to playback OGG or H.264 files or to pull video from other video service streams. It's customizable using jQuery UI's ThemeRoller.
5. Degradable HTML5 Audio and Video for WordPress
This WordPress plugin is similar to the Video for Everybody plugin but there are a few differences. While Video for Everybody encourages encoding video in both Theora and H.264 (as Firefox only supports Theora video via HTML5), if you just want to use one H.264 file, this plugin will force Firefox to fallback on Flash and play the H.264 video that way.
Depending on how much video you use, it may not be worth trying to support multiple formats if the Flash player fallback is acceptable.
BONUS: Sublime Video (Coming Soon)
