Rich Shupe explains how to deliver video seamlessly to desktop and mobile devices, covering the best players for HTML5 and Flash video.
Delivering video across all major desktop and mobile platforms isn't the easiest technical challenge to meet. Here I'll help you to take a break from the heavy lifting and talk about existing players and services that can do the work for you. So, without further ado, here are my top five cross-platform video players.
01. Video for Everybody
Video for Everybody is one of the earliest solutions to support HTML5 and Flash video, and is also the simplest. It consists of a very basic set of markup that uses HTML5’s ability to move to the next supported object if the prior object fails. That is, it uses the <video> element to enclose each supported HTML5 video container source, and follows the collective <source> elements with Flash markup. The result is that the browser tries to display each successive HTML5 source and, if all fail, tries to show the video using a Flash player. Failing that, a static image is displayed.
There are three niceties worthy of mention here. First is the Video For Everybody Generator, which assists you in putting the code together. Second is the fact that this player supports HTML5 audio playback the same way it handles video. Finally, the player site includes a fairly comprehensive description of problems you may face with HTML5 video use, as well as recommended solutions. I hope most of this material was covered in the prior installment of this series, but it won’t hurt to look at the VfE Important Notes.
As an open source player, anyone can alter the code and contribute updates to forks on GitHub. The main files are also hosted meaning that no downloads are required, the code is always updated when new features, devices, and platforms are supported, and the files may even already be cached on your visitors’ systems. And, unlike some hosted solutions, if you prefer to download a copy of the player, say for use without an internet connection (or to eliminate reliance on any server other than your own), you can do that, too.
For simplicity, VideoJS has a five-second setup, includes a great testing demo right on the home page that lets you switch between players to check out the consistent UI, and can also be used as a WordPress plug-in.
03. JW Player
JW Player is the oldest video player in this list, leading the Flash Video player revolution since 2005. It’s also the most powerful player in this list. It boasts the most robust HTML5 features, and is the most capable when it comes to features supported by the Flash Player, including progressive download and RTMP streaming, adaptive bitrate and DVR support, and more features offered by Flash Media Server (FMS), Wowza Media Server, and other server packages. It also features native support for several content delivery networks (CDNs) including Akamai, Amazon CloudFront, BitGravity, CDNetworks, Highwinds, and Limelight.
The player has an impressive feature list, including support for playlists and audio playback that many other players lack, but also has an extensive add-on library. Features such as advertising (Google Interactive Media Ads serving DoubleClick In-Stream Ads, and Open Video Ads, for example), social networking (Facebook posting and Like tools, Twitter, Google+, Digg, Reddit, and Delicious utilities, and Related Video to name a few), accessibility (including audio description, and TimedText captions), effects (HD switch, audio spectrum analyser, screen grab, and blur, are just some available), and analytics (Google Analytics and others). If you’re a coder, you can also take advantage of the powerful developer API to create your own plug-ins.
The player features flexible skinning options, with many existing skins to choose from. Clear skinning guidelines, and an active developer community has resulted in over 100 skins contributed by the community, and several premium skins are also available.
The player has a setup wizard and also has the greatest, and most diverse, number of content management system (CMS) integration options, including multiple modules for WordPress, Drupal, and Joomla.
JW Player is open source, has no library dependencies, and has free licenses for non-commercial use and a variety of paid licenses for commercial use. There are also companion products and services, such as the Bits on the Run video hosting option.
MediaElement.js includes an HTML5 video and audio player as well as custom Flash and Silverlight players that mimic the HTML5 MediaElement API for support in older browsers. This provides developers with a consistent API, and users with a consistent viewing experience regardless of platform or browser. It supports oft-desired features such as standard play controls, skinning, and fullscreen video, but also has a plug-in architecture that enables more unique features. These include looping, auto translation (provided by Google Translate), postroll (displaying custom HTML after a video finishes), and even a virtual backlight that frames the video with matching colors taken from the video during playback (HTML5 only, inspired by Ambilight by Philips).
MediaElement supports the <track> element and a range of accessibility standards including WebVTT. It’s open source, hosted on GitHub, and also comes in plug-in form for WordPress, Drupal, Joomla, jQuery, and more. MediaElement relies on jQuery to function.
The last option I’ll discuss is a part of SublimeVideo. Different from the other packages in this article, SublimeVideo is a hosted service rather than a distributed player. While you can’t download the player for use on your own server, there is a free service plan. It includes unlimited plays but has limited features and displays a branding badge in the lower right corner of the video for the first five seconds or so.
It supports playlist playback, SD/HD switching, and an impressive real-time analytics feature. Because it’s hosted in the cloud, the player is always up to date, and use couldn’t be simpler. You only need to include one line of code in your page and you’re up and running in seconds.
06. Comparison table
Bear in mind that there are many other player libraries in the wild. If you’re a grid person (and who doesn’t like distilling gobs of information into a handy grid for quick review?) be sure to check out Video SWS.
The acronym stands for See What Sucks but, more importantly, this table shows you what sucks less. You can even see any online video played by any player in the table. Just click on the name of the player to see the default demo, or first enter a path to your online video of choice at the bottom of the table.