How to Choose an HTML5 Video Player

HTML5 is a specification of HTML, which is a type of code that describes web pages. HTML5 has revolutionized the way websites deliver content—no longer are a slew of plugins needed to deliver advanced functionalities to web pages such as animations and music.

One of the most important advances of HTML5 was the inclusion of the video element. Formerly, webmasters that wanted to deliver video to end users needed those users to use a plugin named Flash, which they would’ve had to download as an additional software.

Now, video can be placed on a web page with some very simple code. Within the video tag, many different attributes can be added to build out a full-featured HTML5 video player. Web browsers come with their own HTML5 video players, they can be coded, and there are some third-party options. This guide instructs you step by step on how to choose an HTML5 video player.

Your choice of HTML5 player will be heavily dependent on the type of video content delivered on your website. Of particular concern are live streams and video on demand (VOD) videos, both of which are handled differently in different web browsers.

In a Nielsen report on VOD usage globally, two-thirds of respondents said they watched VOD content. Major players in the VOD market such as Netflix and Youtube both use HTML5 players. To ensure your videos are HTML5 and that they reach the largest audience, you’ll need to convert all of them to either .OGG, MP4, WebM.

In the case of VOD, a third-party HTML5 player that can render videos for you in all browsers and devices is the most straightforward option.

For many purposes, the HTML5 player built into modern web browsers is fine, such as people who run their own personal blogs or websites as a hobby.

However, in terms of delivering video from a business perspective, it rarely makes sense to rely on the browser’s HTML5 interface. Since each browser uses its own interface, user experiences varies across websites, which is not good for branding purposes. This necessitates either the creation of custom video players or the use of a third party player, the latter of which could be proprietary or open source.

Proprietary players offer many advanced features and customizations that aren’t available on the main open source HTML5 players. The decision comes down to thinking about the business: are the extra resources needed to add missing features to an open source player cheaper than what it would cost to play for a premium player that already has those features?

If your company has people with coding knowledge, you can build your own player via a combination of HTML, CSS and the HTML5 media API to get a consistent interface across all browsers for your video. Aside from the default web browser and custom-built HTML5 player options, you can also avail of many third-party HTML5 players built by other developers.

If you don’t have the resources or the talent at your disposal to build a custom player and you need a more consistent interface than what the basic web browsers offer, you should opt for a third-party HTML5 video player.

If you go down the third-party route, it’s important to actually go out and research the different HTML5 video players available so you can choose the one best suited to your needs. Some examples of the main video players you can look out for include:

• JPlayer : this is a basic open-source media player plugin with HTML5 support. The player’s skin is customizable via CSS, and it also embeds Flash videos, ensuring your content can even reach users with older, outdated versions of Internet Explorer.
• Cloudinary: the Cloudinary HTML5 video player comes with many advanced features, including support for multiple formats, adaptive bitrate streaming, video analytics, and player customization.
• Video.js: this popular open-source HTML5 video player, built with JavaScript and CSS, is used on over 400,000 websites. You can build your own skins for VideoJS , the documentation is excellent, and there are over 25 plugins to enhance its capabilities.
• JWPlayer : a full-featured proprietary HTML5 player that comes with support for 4k resolution videos, adaptive bitrate streaming, live streams, and a customizable UI.

When weighing up third-party HTML5 video players, you need to consider the fact that any videos you or your users may want to upload to your site could be in the wrong format and unsuitable for the Web. Even if the video is already in a suitable Web format, it’s imperative to have videos available WebM, Ogg (aka Theora), and MP4 formats so that the optimal format is delivered for each browser and user. This is because nobody could agree on a standard single format.

Video transcoding, the name given to the direct digital-to-digital conversion of one encoding to another, is a very time-consuming process. Ideally, you should be looking for a service that can transcode videos for you from a long list of inputs “on-the-fly” and deliver the video to web browsers in all three of the aforementioned web formats. Some proprietary cloud-based HTML5 video player providers can perform automated transcoding, but you are unlikely to get such features in open-source projects.

HTML5 video has revolutionized the way video is delivered online, but it’s important to ensure video players have the requisite features, customizations, speed, and that they come with minimal hassle in terms of transcoding. Follow the above steps to ensure that you end up with the right HTML5 video player for your specific needs.