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.
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.
SubmlimeVideo: video player as a service
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>
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.
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.
Topics: HTML5 and CSS3