Choosing a Video Player: Features and Specs for the Top Five

There’s no shortage of off-the-shelf (OTS) video players to deliver content online. Enter the term “video player” on the popular GitHub code repository site and you’ll see more than 1,000 results. Despite this wide field of available players, it remains a challenge to find a video player that meets specific technical and business requirements.

In this article, I’ll walk you through the questions you need to answer before you can select a player, and then I’ll review the following players that are most commonly used for professional online video deployments:

• MediaElement.js
• Video.js
• jPlayer
• Flowplayer
• JW Player

In my role as video solutions architect, I use JW Player 6 most frequently, but there are different features and limitations of each of these products, and a rushed decision to use an OTS player could end up costing you down the line.

This article explores video players that are built for web playback, not necessarily player codebases that work within native applications on a mobile device. Hosted video services such as YouTube, Vimeo, and Brightcove are also not covered in this article.

Determining Your Requirements

When a client engages me to architect a new project, a discovery process is invaluable to create the discussions and decisions that will define the optimal viewing experience and to determine the supporting elements of content delivery. These four primary questions will help steer you toward choosing the right player:

1. Content: What is the nature of your video?
2. Features: What does your player need to do?
3. Pipeline: How is your video encoded and deployed?
4. Business: What is your budget and timeline?

CONTENT

If you’re a subscriber to this magazine, chances are you’re working with two types of video content: video on demand (VOD) and live. As you’ve likely heard, HTML5 web browsers do not consistently handle all of the formats and codecs used to deliver these types of video. Regardless of your player choice, you should deliver your content in at least two formats to reach more viewers on more devices -- and picking those two formats is largely a matter of the important targets you want to reach. Figures 1–3 illustrate the popular codecs and formats available for online video playback, as well as the support offered by the players covered in this article.

The vast majority of online video is VOD. Every player discussed in this article can play VOD content served as a progressive download over HTTP (content playback can begin when a small buffer has downloaded, without requiring the entire video file to download) or as a byte range request. All current HTML5 browsers can use a range request, in which the browser requests specific fragments of the video file, enabling the player to seek any part of the video and to resume playback very quickly. Flash-based rendering of video, however, can typically only load HTTP video as a progressive download, making instant seek and faster start times difficult. Having other Flash rendering capabilities for adaptive streaming protocols in an OTS player can be vital to its success.

With respect to live content, the lack of live streaming support without the use of a plug-in has left a huge vacuum in the HTML5 offering. In fact, most HTML5 desktop browsers can’t handle live streaming at all -- Apple Safari browser (Mac version only) is the only desktop browser that natively supports its HTTP Live Streaming (HLS) format, while newer builds of Google Chrome with requisite media extensions installed can play video formatted for MPEG-DASH (or dynamic adaptive streaming over HTTP) delivery. If you need to deploy live streams to your audience, then the rendering mode of your OTS video player should fall back to plug-in based playback, such as a player codebase driven by Adobe Flash Player. Later in this article, I’ll discuss how OTS players have different operating modes, based on the browser that is rendering the player.

All of the video players discussed in this article have a Flash fallback, but most players cannot handle live streams consistently across all devices and desktops. Low-latency Flash-based live streams are typically served with RTMP (real-time messaging protocol), but many media servers, such as Wowza Media Server or Adobe Media Server, can provide live streams in Adobe’s HTTP Dynamic Streaming (HDS) format as well as HLS. Most OTS video players cannot play Adobe HDS video, as the Flash Player plug-in doesn’t natively ingest HTTP streaming content.

Note: External ActionScript 3.0 libraries are required for parsing HTTP manifests and decoding the HTTP video fragments. Adobe’s Open Source Media Framework (OSMF) is still available for implementation in custom players, but many web developers have strayed from using OSMF as it is no longer actively maintained by Adobe.

On mobile devices, Apple HLS is the only consistently supported streaming format for live or VOD content. HLS works very well on iOS, but on Android -- which relied heavily on the Adobe Flash Player for handling live streams -- the implementation of HLS playback is barely useable.

None of the OTS players have a graceful solution to handle live streams for Android. And this scenario is not one that any player codebase can solve -- it’s a problem that browser vendors need to address. MPEG-DASH will likely be the future deployment option for live streaming on Android, but the vast majority of Android devices in use today can’t use DASH technology.

FEATURES

The next consideration for choosing an OTS player is making sure it can perform all of the functions you need for your video content. All of the players featured in this article can perform the following tasks:

• Basic playback, including play/pause, seek, time display
• Poster frame
• Volume control
• Normal and full screen display
• Skinning via CSS and custom images

However, not all OTS players will offer the following features:

• Closed captions/subtitles
• Multilingual audio track selection
• Playlists
• Ad insertion
• Watermark/overlay
• Responsive layout for consistent relative player size

As I summarize each OTS player, I will point out the specialty options that are available.

PIPELINE

The third area of discovery is an examination of your existing video deployment process, looking specifically at how you are encoding and delivering your video formats. Ideally, the OTS player you choose will work with your existing infrastructure, but in some cases you may need to modify that infrastructure to work with the OTS player.

For example, if you’re only offering promotional video content, or any type of video content that can be freely distributed (e.g., product support videos, informational content), you’re encoding all of your content with a single high-quality bitrate AVC/H.264 MP4 preset, and you’re hosting all of your content on a web server or Amazon AWS S3, you’ll likely have a wide range of OTS players to use. Every player discussed at the end of this article will work in this scenario.

However, if you’re encoding multiple bitrates for adaptive streaming delivery via HLS and HDS, and you’re using a content distribution network (CDN) such as Akamai, you will likely need to use a premium licensed OTS player such as JW Player or Flowplayer.

Likewise, if you’re using any specialty protocols such as RTMP for live streaming or VOD, you’ll need to make sure that the OTS player supports the delivery mechanism. Just because an OTS player has a Flash fallback does not mean it can necessarily play RTMP video, or ingest an adaptive streaming manifest specifying RTMP streams. Wowza Media Server, for example, can take multiple bitrates of a given video and provide manifests using RTMP, HLS, HDS, and Smooth Streaming formats. JW Player, however, can only ingest the RTMP and HLS manifests provided by the server.

BUSINESS

As someone investigating OTS players, one or both of these is likely true: You don’t have the resources or budget to build a custom video player from scratch, or you’re curious if you’re paying too much for a custom video player when an OTS player will suffice. While many OTS players featured here are available at little or no cost, you may find that the premium OTS players are worth the one-time license fee or the annual subscription price.

When you are evaluating premium OTS players against those that don’t require a licensing fee, remember the price versus cost paradigm. Sure, a free player might be able to get you 90% of the features you need, but if you’re spending more time and money to finesse that free player to gain 100% of the features (and perhaps to a degree below that of a premium player), the result may end up costing you more. The lack of specific skin customizations in a player could also damage your branding efforts.

Finally, consider the time and resources necessary to transition from your existing video player to something new. For example, if an OTS player is initialized with a JavaScript Object Notation (JSON)-like data schema, you’ll likely need to make changes to the underlying content management system. If such a change is necessary, hopefully the parameters that you use for one player can be easily mapped to another player’s parameters.

Evaluating OTS Players

With your requirements defined, you’re ready to look for an OTS player to match your needs. As I’ve mentioned, there is a wide and growing field of player codebases available; this article only covers some of the more popular options. I have performed tests with each of these players, and I would recommend them for a wide range of use cases. I’ve compiled several examples illustrating the usage of the featured OTS players at videorx.com/players.

BASICS OF AN OTS PLAYER

Now, let’s review the standard nuts and bolts that you can expect to see in each of the five OTS players covered here, including format specification, rendering mode, skinning options, and cloud vs. self-hosted code.

Specifying Formats

Each OTS player I’ve included in my review has the ability to ingest multiple video codecs, including AVC/H.264 and VP8, as well as their respective video formats, MP4 and WebM. The players can also use standard HTML5 <video> and <source> tags to indicate each of the formats you have available for any given piece of video referenced in your code, such as the following:

<video width=“640” height=“360”>

<source src=“sample.mp4” type=“video/mp4”>

<source src=“sample.webm” type=“video/ webm”>

</video>

The uniqueness of each OTS player lies in how its JavaScript code overwrites the handling of these native HTML5 tags to work consistently and reliably from one browser to the next, from mobile to desktop. (So much for standards!) The use of this tag-based approach will typically be just fine for basic VOD playback, where no special protocols or streaming are utilized. For more “under the hood” control, each of these OTS players can initialize the setup and source parameters via JavaScript. This setup code is where OTS players will dramatically differ.

Rendering Video

Due to the diverse range of HTML5, non-HTML5, and plug-in enabled browsers in use today, any browser-based video player needs to have to at least two rendering modes: native HTML5 video rendering as well as a Flash-assisted rendering mode. Some OTS players, such as MediaElement.js, have an additional rendering mode via a Microsoft Silverlight player codebase to play streaming formats on Windows Phone. Each OTS player discussed in this article uses JavaScript to determine which rendering mode to use, based on which formats you’ve specified, which browser is being used to view the video, and which plug-ins are installed.

Note: If JavaScript is not enabled on a browser, standard OTS player configuration will likely fail. It’s highly unlikely that your target audience has disabled JavaScript. Most websites rely heavily on JavaScript for any interactivity to function correctly.

Skinning the Player

The standard approach to customizing the style and format of any HTML element is CSS (cascading style sheet), and each of these players can use CSS styles to control most aspects of their appearance, from player controls to positions of overlays. If you prefer to use JavaScript to control appearance, each of these players has an API to do just that. You can even hide the built-in OTS player controls (often called “chromeless” mode) offered by OTS players and create your own custom control layer.

Players may also use a separate skin file to specify the controls that are shown and the graphic files (PNG, JPEG, SVG) used for controls and overlays. JW Player, for example, uses a skin.xml file that not only specifies the order and placement of controls, but it also represents PNG graphics as Base64-encoded entities! In other words, you don’t even reference external graphic files.

How to Create Interactive HTML5 Video

Turning a basic HTML5 video player into one with enhanced playback features is surprisingly simple. Here's the code to add chapter markers, captions, and more.

05 Jun 2014