Enhanced HTML5 video players

There are numerous "enhanced" video players; most are free and open source, some are commercial. They offer lots of features, which are listed below. Not all of these features are available in every player, this list just illustrates what can be added to the standard <video> element. 

We call them "HTML5 enhanced video players" because on top of being based on the <video> element, they come with custom features, custom look'n'feel, chapters, etc., based on a JavaScript API that makes such customization possible.

Accessible players

For those of you interested in this particular topic, here is a very good resource that compares most of the players presented in this section, in terms of accessibility. This resource has links to players designed especially for people with disabilities: accessible media players and resources.

Advantages and disadvantages of using a custom player

Advantages of enhanced video players:

• Support for all kinds of subtitle formats

• Customizable look'n'feel (add your logo, custom themes, etc.)

• Full screen mode without borders on old browsers (today's implementations of the <video> element support full screen mode)

• Consistent look'n'feel across browsers (menus for subtitles, etc.)

• 1.5x, 2x, 3x speeds for fast playback

• Social buttons for sharing on Facebook, Twitter, etc.

• Support for chapters

• Support for scrub bar thumbnails

• Extra features for better accessibility

• And so on...

Advantages of relying only on the <video> element  rather than on an enhanced player:

• Total control!

• No need for external dependencies

• Lightweight: no need to download lots of JavaScript and CSS code

Video.js: a framework for building your own custom video player

Open source, and made for developers, video.js comes with many plugins (chapters, thumbnails etc.).

To use 3rd party JavaScript such as video.js, simply requires importation of the JavaScript file they provide, in just the same way as you'd import one of your own JavaScript files; so, for video.js, you'd put the following line in your HTML code:

<script src='video.js'></script>

You'll then have all the features available to you through functions documented by the provider.

Which should I use? the <video> element and my own customization or an out of the box enhanced player?

Either solution (basic player or enhanced player) is good and HTML5 compliant.

Popular players such as  JWPlayer have many explanations and examples on their Web sites, and are either free of charge or come with free versions.

Interesting comparisons and reviews are available on the following Web sites:

• Comparison matrix of most of existing HTML5 video players

• 10 HTML5 video players compared - This site refers to Flash Player, previously the most popular way of delivering video on the internet. Though its now deprecated, the alternatives suggested on this page still apply.

Example screenshots

Scrub Bar thumbnails (JWPlayer)