10 HTML 5 Video Players




With so many options of video players out there, it’s hard to choose which application will be best for you.  I would suggest keeping things simple and avoiding future headaches of video player upgrades, new features, and bug fixes.  Stick with an online based video player that will take care of all of that for you and make your job easier.  If you are in to easier ways of doing things and keeping things simple, you may also want to check out www.wix.com.

Wix is an easy drag-and-drop online system that is unveiling a free HTML website builder on the 26th of March, 2012.  Wix has already gained widespread popularity for their drag-and-drop Flash website builder that allows users to easily build complex, powerful, and stunning websites.  Whether you’re looking for an easy way to put together site with a full screen background, or display your portfolio online, Wix is certainly worth checking out.  It doesn’t matter if you’re a seasoned web developer or an ambitious do it yourself-er, creating a free HTML website or SEO friendly Flash website has never been easier.

One of the most exciting new features to HTML 5 is the ability to handle audio and video with the newly introduced <video> element.  This new HTML element allows developers to implement video on their site with minimal code.  Before it would require a Flash or Java-based player, both which would then require the viewer to have some sort of third party plug in to make the video play properly.  Then there was the issue of Apple giving no love to Flash, meaning if you were using a Flash video on your site and someone viewed it from an Apple mobile device the video would not play.

Several developers are already using HTML5 video players, and with good reason.  I recently had a client request I switch their video player from their Flash-based player to a HTML5 player.  The result was nearly 100 less lines of code and smaller file sizes.  Developing a user friendly html website can be time consuming enough, so before you tackle a project like building your own custom HTML5 video player let’s take a look at 10 HTML 5 video players that are out there and see if they’ll do the trick.

LeanBack Player

Lean Back Player

LeanBack Player utilizes JavaScript and HTML5 to make a powerful video player interface with keyboard shortcuts, and is compatible with Chrome, Firefox, Opera, Safari and Explorer.  As well as most major mobile platforms, including Android, iOS, BlackBerry, HP webOS, Mozilla Mobile, and Windows phones.  LeanBack Player also supports a gaggle of audio and video codecs, with the likes of H.264, Ogg, WebM, and Mp3.  You can also easily customize and skin LeanBack player with CSS for a seamless integration with your site.

MediaElement.js

MediaElement.js is a HTML5 audio and video player that is built with pure HTML and CSS.  For older browsers that don’t support HTML5, this player offers a custom Flash player as well as the popular Java Silverlight player, which mimic the MediaElement API.  For WordPress, Drupal, Joomla, jQuery, BlogEngine.NET, ruby gem, and plone folk, it’s even easier for you to implement on your site thanks to plugins that are offered.  MediaElement.js also gives you control over what buttons to display on the control bar.

J-MediaElement

Not to be confused with the previously named mediaelement.js HTML5 video player, the J-Media Element player, or JME for short, is another HTML5 audio and video playing option.  JME has a Flash fallback and the developers pride themselves on the flexibility of the player that was built with an intuitive DOM-API and semantic coding structure.  It is supported on Apple mobile devices, has keyboard shortcuts, a true full screen mode, offers subtitles and is easily skinnable with CSS.

VideoJS

With an equally similar name to some of the players already mentioned on this list, VideoJS is an HTML5 video player that has been plugged in to JavaScript for some extra features, like a true full screen mode, and the ability to play subtitles.  VideoJS offers a Flash fallback that uses the same HTML and CSS files as the HTML5 version, giving a uniform look regardless of which player the viewer winds up with.

 SublimeVideo

 SublimeVideo is yet another HTML5 video player with a name that is rather self-explanatory.  Offering the standard Flash fallback, iOS support, and a true full screen mode, SublimeVideo has a consistent user interface, whether you’re viewing from the Flash player or the HTML5 player, and is supported on any browser or device.  It also allows you to switch SD-HD video sources with a single click, create playlists, and view real-time video usage stats for your site. But that’s not all, SublimeVideo is in the cloud, meaning you’ll always have the latest version.

 JW Player

JW Player isn’t new to HTML5, it has simply evolved, adapted, and improved itself with HTML5.  The developers of JW Player have been in the video player niche since 2005, adapting to all of the trends, interfaces, and viewer demands and still maintaining the role of one of the web’s leading video players.  It is compatible with all major browsers and mobile platforms, is skinnable and offers a Flash fallback.  It also features plugins for keyboard shortcut controls and subtitles, and it comes as a plugin for WordPress and Drupal.

Projekktor

Projekktor may have a name that reminds me of Saturday night slideshows that reminds me of being way back in my single-digit years, but I assure you it’s much easier to use and doesn’t jam like a slideshow projector.  Projekktor allows you to have pre and postroll ads, allowing you to generate some ad revenue off your videos, offers playlist options, a true fullscreen mode, has a Flash fallback with RTMP support, a unified JavaScript API and is easy to integrate and skin to match your site perfectly.

 Dark Onyx

What can’t Dark Onyx do?  This is not just a video player, this is an entire video platform designed for any size of business or organization.  Dark Onyx allows you to easily customize the appearance of the player, share videos across multiple social media platforms with an easy mouse click, create external playlists, and create your own ads.  The player is offered in four different versions, including a free one.  All commercial versions allow you to remove the DarkOnyx watermark, or replace it with your own, and includes direct tech-support.

Flare Video

FlareVideo is an open source HTML5 video player with Flash fallback and is completely free for commercial use.  The player is easily skinnable with CSS, allowing itself to work perfectly with any site design or color combination.  FlareVideo keeps video playback simple and file sizes minimal by offering only the basic features. like a full screen mode and keyboard shortcuts.

YouTube

How could we not include YouTube?  The beauty of YouTube is that it is just like SublimeVideo, it’s an online based video player that updates itself with bug fixes, upgrades, and everything else so that you don’t have to worry about it.  What’s even better about YouTube, other than it’s ridiculously easy to use, is that they offer revenue sharing.  If your video starts to rack up the views, YouTube will start paying you.


scottstanton

About the author:

Scott Stanton has spent the past decade working nights developing HTML websites as a freelance web designer, only to write about the latest HTML website design trends at his day job as a freelance writer. Scott is a regular contributor for Wix.com and you can hang on his every word @TheScottStanton and on Google+

Comments:

Scroll back to the top
Content


Receive the top stories from SpyreStudios and the Splashpress Media network every week, right in your Inbox. Relevant and timely content is yours for FREE!