Enhanced HTML5 video players

INTRODUCTION

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 customizations possible.

An explanation of what enhanced video players can do, by the creators of the popular JW Player.

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 player resources and demos.

ADVANTAGES AND DISADVANTAGES OF USING A CUSTOM PLAYER

Advantages of enhanced video players:

    • Flash or ActiveX/Silverlight fallbacks to make the player work in old versions of Internet Explorer
    • 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 (also, Flash fallbacks in some cases)

WHICH SHOULD I USE? THE <VIDEO> ELEMENT AND MY OWN CUSTOMIZATIONS OR AN OUT OF THE BOX ENHANCED PLAYER?

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

Popular players such as the Sublime video player (now bought by Dailymotion, and no more officially supported, but still downloadable) and JW Player have many explanations and examples on their Web sites, and are either free of charge or come with free versions. The PayPal team open sourced an “accessible video player” used on the PayPal Web site.

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

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.).

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s