Finding a Video Player That Works for You and Your Budget

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 used. For more “under the hood” control, each of these OTS players can initialise the setup and source parameters via JavaScript. This setup code is where OTS players will dramatically differ.

Rendering Video

Most of the current production releases of OTS players by vendors discussed in this article no longer implement a Flash fallback strategy; all rendering of video is handled via native browser APIs. If your target deployments require legacy browsers that don’t include modern HTML5 APIs, you will likely need a player (or player release version) that is capable of Flash rendering. The days of Flash-based playback are numbered, though, as Adobe has announced that it will sunset Flash Player development in 2020.

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 customising 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. The most important aspect of skinning is its responsiveness, or how the skinning model translates across all of the rendering modes of the player. The default OTS player skins are shown in Figures 3 to 8.

Note: older smartphone browsers may not allow a custom player skin to be used, as video does not play “inline” on the page as it would on a desktop browser. Rather, the video opens full screen on the smartphone device, and the smartphone browser renders the control layer.

Cloud Vs. Self-Hosted Code

When integrating a new video player into your CMS, you usually download the resource files of the OTS player and copy the files, including JavaScript, HTML, CSS, and skin files, to a location on your web server. Your site’s code then references those resource locations. Some OTS video player vendors offer their core player files (mainly the minified JavaScript source) on a shared public URL, usually hosted on a CDN or on a cloud-based network. Even when the source is hosted elsewhere, you still need to put any customised CSS or skin files on your own web server.

Why is the distinction between cloud or self-hosted player code important? The primary benefit to hosting all of the player files on your own site is that you

can be assured that the player will work as expected after you’ve integrated the player and tested the site on your target browsers. However, if a new browser release or update suddenly breaks the player code, it’s beholden on you to grab any updates to the player source code and fix your site. Alternatively, if you employ a cloud-hosted player, you will benefit from any updates and revisions to the player, which will automatically be inherited in your implementation. It’s true as well that such revisions could potentially break any customisations you’ve made. Either way, you will want to keep abreast of any player changes announced by the OTS player vendor you’ve selected.

Note: if your job is to deploy a selected OTS player across multiple sites and businesses, you may very well want to use a cloud-hosted version of an OTS player or create your own shared public URL for the player code you use. In this way, you can more easily maintain player code across a large number of sites.

MediaElement.js

Part of the WordPress core codebase, MediaElement.js is a popular open source video player, at version 4.2.9 as of this writing, started by John Dyer (@johndyer). This player’s code has been compartmentalised, available as a unified API to audio and video elements or to a player-controller user interface, as well as an “all-in-one” API with controller.

For standard HTTP delivery (range request or progressive download), MediaElement.js can cover nearly every mobile and desktop target. MediaElement.js also offers support for a <track> tag to provide captions. For live streaming content, you can use RTMP (via Flash renderer), HLS, or DASH.

Video.js

Originally developed by Steve Heffernan (@heff), the co-founder of Zencoder.com, Video.js is an open source video player that provides a quick and easy way to deploy video content via its cloud-hosted player codebase and CSS styles. Brightcove now maintains the core development of the player, while other contributors develop additional plugins for the player.

You can customise a player with a code editor at go2sm.com/jscode. The player is also available as a WordPress plugin. The player supports a wide range of options, from closed captions and subtitles to chapters. The 7.1.0 release supports dozens of plugins that enhance its capabilities. I’m incredibly im-

pressed by the sheer volume of clear and precise documentation for this free player that the contributors have provided on github.com. (I’m not fond of the label “plugin” in the Video.js lexicon. Specifically, its plugins are additional JavaScript modules that extend the feature set of the player.)

Bitmovin Player

Like many commercial player vendors, Bitmovin offers a complete suite of products and services to manage your video workflow, from encoding content to playback to analytics. Bitmovin provided a trial account that I used to build test players as part of my research for this article. For its web player, your account is assigned a license key that is included in the player’s JavaScript initialisation. In your Bitmovin account, you also assign the site domain(s) that will use your player license key. For local playback and testing, you must use a web server running on your local computer—the localhost domain is automatically whitelisted for any license key. The samples I built were painless to implement—their samples and documentation provided all the necessary code snippets needed to initialise and run a range of playback sources, from MP4 to HLS to DASH.

Bitmovin offers a free trial account that can be used for up to 5,000 player impressions per month. Subscriptions start at $139/month, and surprisingly, the offering has fixed (and public!) pricing for up to 1.75 million player monthly impressions at $1,299/month.

Flowplayer

Flowplayer shares many characteristics with JW Player. Flowplayer originally started as a Flash video player, but it has had an HTML5 version of the product for several years. One of the interesting features I’ve found is the “splash” setup, which enables the player to only display the poster frame and not fully initialise the HTML5 or Flash rendering mode. I find this mode useful for players who use time-stamped secure signed URLs with a CDN such as Amazon CloudFront. You can then generate the video URL(s) when the user initiates playback. There is a commercial licence required, starting with a one-time fee of $150 or with a monthly subscription licence.

While I wasn’t provided with a trial account, I was able to test playback via a local web server (i.e., content originating on localhost). Without a licence key, I was able to use the player codebase on a production website, but the Flowplayer watermark is present above your video content, as shown in Figure 6. Flowplayer also has a jQuery dependency if you plan to use <video> tags to insert your video content into your layout, as opposed to the JavaScript API.

JW Player

By far one of the most popular video players since the advent of Flash video, JW Player is perhaps the most widely used OTS player. The JW stands for Jeroen Wijering (@jeroenw), the creator of the player. Now in its eighth major release, JW Player showcases its Flash roots by enabling a powerful set of features in HTML5. As a media server developer, I’m a big fan of JW Player’s support of adaptive streaming manifest support. It can ingest live and VOD streams in adaptive HLS or DASH. (Adaptive RTMP is still available in 7.x or earlier releases.)

Unlike the free or open source OTS players discussed here, JW Player requires a subscription licence. A limited starter licence is available for $5/month, but most businesses can expect to pay $50/month. Enterprise pricing is available for businesses requiring ad integration and high-volume playback.

JWPlayer’s JavaScript APIs have been fairly consistent over the last three major player releases, and as a result, upgrades to existing player implementations are relatively painless. The biggest change in the 8.0 release is the removal of Flash RTMP playback. With a player licence key, you have access to the JW Player dashboard, which allows you to configure unique players to track different videos and/or site content.

THEOplayer

THEOplayer narrowly missed my original review, as its offering was fairly new to the scene in 2014. Fast-forward to 2018, and THEOplayer has steadily added more features and

capabilities to its player offering. Originally touted as an optimised HLS player that could parse and render HLS on browsers that didn’t offer native HLS playback, THEOplayer can now render HLS and DASH, as well as low-latency CMAF. Its R&D investment into HLS and DASH strategies is revealed by the wide browser support, which can be viewed at go2 sm.com/theosupport.

THEOplayer’s staff sent me a bundle of configuration files to test its player, with all of the core features enabled. Within a few minutes, I was able to configure an HLS video source. THEOplayer also offers a free tier—you can use THEOplayer for up to 10,000 player impressions a month. Beyond that, you will need to discuss your deployment with the sales staff. (Remember the talking points I mentioned earlier.)

Moving Forward

Any of these players provide a working solution to a wide range of online video content. Compared to 2014, the differences between player offerings in 2018 are much less significant. Most commercial player vendors now offer a suite of tools to accompany their player technology, ranging from analytics to optimised video encoding. Every project has a unique set of priorities and constraints, but with so many OTS player options, you will likely find one to meet your needs. Before you begin to compare your options, clarify the four primary questions of content, features, pipeline, and business. As more content and playback are managed by “embedded” player offerings from Vimeo and YouTube, you may reconsider the need for customised players and self-managed video catalogues. If you need to have more ownership of your video solution— for branding, security, or other reasons—you might find it useful to start with one of the OTS players described here.

[This article appears in the Winter 2018 issue of Streaming Media Magazine European Edition as "Finding a Video Player That Works for You and Your Budget."]

Free

for qualified subscribers

Subscribe Now Current Issue Past Issues