Hybrid Video Players for Video That Plays (Almost) Everywhere

Video is becoming more and more popular as an element of web pages. With the fragmented technology standards, providing video that plays everywhere can be tricky. Fortunately, there’s an assortment of solutions available that package up all the complexity and provide a single, integrate solution for video that just works.

As I discussed in a previous blog post on video that plays everywhere, you need you need to use HTML5 video for the iPhone and iPad. With 14 million iPhones and 4 million iPads sold in the third quarter of 2010, these devices have quickly become a major platform.

On the other hand, for all versions of Internet Explorer through 8.0, you need Flash video. So until IE9 is the oldest version of IE you care about supporting, you’re going to need to provide a Flash option.

With Firefox, Safari, and Chrome, you have the choice of using HTML5 or Flash, at least for recent browser versions, but you’ll need to provide Flash video for users with older versions of those browsers.

In summary, the mix of browsers and technology politics has forced everyone to provide both Flash and HTML5 video players, and this state of affairs will continue for years to come.

To achieve a consistent appearance and behavior for your Flash and HTML5 player can be tricky, however. Fortunately, several companies are addressing this need by providing hybrid players that include both Flash and HTML5 modes. Now your challenge is shifting from providing support for both HTML5 and Flash, to choosing which hybrid player to use.

Adobe Distributes Kaltura Video Player

Adobe recently began distributing Kaltura’s HTML5 video player through Adobe’s Widget Browser.

Adobe’s Widget Browser is a free AIR application that provides access to a shared library of widgets. A widget, in this context, is just a combination of HTML, CSS, and JavaScript code, packaged up so the Widget Browser can provide configuration controls and deliver a set of files to the developer.

The Kaltura HTML5 video player is open source, and it is built on the jQuery UI framework. It includes a Flash video player, from the Open Source Media Framework, as a fallback for browsers that don’t support HTML5.

More info on the Kaltura player.

SubmlimeVideo: video player as a service

Jilion, a company based in Lausanne, Switzerland, has created the SublimeVideo HTML5 video player, currently in beta. Unlike a typical Flash video player, the Sublime code is not hosted on your site. Instead, you include a single line of JavaScript:

<script type="text/javascript" src="http://cdn.sublimevideo.net/js/customercode.js"></script>

where ‘customercode’ is provided by the company when you sign up. Sublime’s JavaScript code, as well as the fallback Flash player when needed, is delivered from the Sublime content delivery network to your visitors’ browsers.

Now, you just use an HTML5 video element, and give it the class ‘sublime’:

<video width="640" height="360" class="sublime"><source src="/video/videofile.mp4" type="video/mp4" /><source src="/video/videofile.ogg" type="video/ogg" />
</video>

The Sublime JavaScript modifies the video element to turn it into a Flash player, for those browsers where it is required, and styles the browser-supplied HTML5 player, for browsers that support it.

And Many More…

Kaltura and SublimeVideo are just two of the many video players available that support both HTML5 and Flash video. Here’s some others to check out:

• Flowplayer was one of the most popular players in the pre-iPad era, as an all-Flash solution. It’s been upgraded to provide full iPad and iPhone compatibility, if properly configured.
• Video Player Factory offers a highly configurable player, which like Flowplayer started out as a Flash-based player but has been extended to support HTML for the iPad and iPhone. What sets it apart is the optional hosting and video management solution. If you use VP Factory’s hosting service, it converts your uploaded video into all of the required formats. It also offers analytics, advertising, and more.
• Long Tail Video offers the JW Player in both open-source and commercial versions. Another player that started in the all-Flash world and evolved to support HTML5 as well, this player includes support for streaming, advertising, and more. The company also offers the Bits on the Run hosting and encoding service.
• VideoJS provides an HTML5 video player with Flash fallback. The site includes a simple online interface that creates the embed code for you. It uses CSS for all styling.
• Projekktor is another open-source HTML5 player with Flash fallback.

Choosing a Player

Choosing the best player for your needs is no simple matter.

If you have been using Flowplayer, as we have, the path of least resistance is to modify your Flowplayer setup for iPhone and iPad compatibility.

Adobe’s backing gives us some confidence that Kaltura’s player will be one of the winners, so it is certainly merits a serious look.

Once it is out of beta, the SublimeVideo player will provide an easy-to-use alternative, since you don’t need to provide any fallback code yourself, or even host the JavaScript for the player.

Video Player Factor offers much more than a player, and is worth a serious look if you’re looking for a complete solution for encoding and hosting, as well as playback, and want to minimize the technology hassles. It’s hosting is more expensive than commodity hosting, but it provides a content delivery network (CDN) for efficient delivery and eliminates the need to worry about things like mime-type settings on your server, which may require changes to support HTML5 video.

Depending on your styling needs, you’ll want to look at the other players as well. Each takes a somewhat different approach to how the styling is applied, and you may find that one meets your needs better than the others.