Introducing an Accessible HTML5 Video Player

Video on the web has come a long way over the years. From applets to RealPlayer (who remembers that?) to QuickTime to Flash, and now the HTML Video element.

For the last few years, many HTML5 video implementations have included Flash fallbacks, especially for Microsoft’s Internet Explorer (IE). But HTML5 video in IE has been supported since version 9. It’s time to end this era and provide web-based video without plugins.

The player and its goals

Customizing an HTML video player is still required for a fully functional and accessible experience across browsers and platforms. Browsers’ native controls are still not accessible as a whole, nor is rendering captions.

Although browser support isn’t quite there yet, the new open-source Accessible HTML5 Video Player takes one big step closer to a fully standards-based and accessible video player. The project takes advantage of HTML5 and avoids dependencies and plugins.

The goals of this project were to:

• Take advantage of the latest web technology; use HTML5 for the video, controls, and captions.
• Reduce code weight (the CSS is 5k and JS is about 18k, not minimized!).
• Make fully accessible especially to keyboard and screen reader users.
• Support captions (uses WebVTT, the HTML5 standard).

[caption id=”attachment_851" align=”alignnone” width=”649"]

Screen shot of the Accessible HTML5 Video Player[/caption]

Solid foundation

Browser support for HTML5 video is very good (only IE8 doesn’t support it). So the code for the Accessible HTML5 Video Player starts with that; the markup consists of only the Video element and a few divs for the controls, captions, and a container.

The video element remains as-is if rendered a mobile or tablet device since native functionality is well-supported. This also occurs when JavaScript is unavailable on a desktop browser.

If rendered on a modern desktop browser with JavaScript, the experience is enhanced with custom controls, captions (if provided), and a slick design. This is the main use-case for the project. (IE8 and IE9 have fallbacks).

The controls

As mentioned above, accessibility of video controls in browsers is still lacking, so they must be customized. Careful attention was given to the semantics. The Restart, Rewind, Play, and Forward buttons use the button element. The Mute and Captions controls are checkbox inputs because they each have two states, selected and not selected.

In addition to the Video element, other HTML5 features can go mainstream and work great in the video controls. Cases in point, the range input (slider) and the progress element. The volume setting is implemented with an input element with a type of range since it is “representing a number, but with the caveat that the exact value is not important”. The video progress indicator is implemented with a progress element as it “represents the completion progress of a task”.

Addressing quirks

Although web standards is used as much as possible, there are many nuances to tackle including caption support and rendering of HTML5 elements.

WebVTT captions on the latest iOS and Android operating systems are supported which is a huge win for everyone. But on desktop browsers, support is still quite inconsistent (Chrome proved to be the best). Although WebVTT support is claimed by the latest versions of mainstream browsers, work-arounds had to be implemented which was disappointing, particularly in IE11, Safari7, and Firefox31. This is especially strange because the WebVTT implementation worked well in Safari 6 and Firefox 30.

To make the design of the HTML5 elements consistent across browsers, browser-specific CSS selectors were used in certain cases. For example, the progress bar required a webkit selector (webkit-progress-bar) to ensure the design was rendered more accurately. The range input had the most variance; between that and the design, custom styling was required for webkit, mozilla, and IE10 and higher. IE’s rendering is considerably different and was most difficult to address.

Give it a go

Feel free to visit the Accessible HTML5 Video Player on GitHub and clone or fork the code. In the JavaScript initialization, several options are provided but only the first is required (the ID of the container). There are no dependencies. We are open to suggestions and pull requests.

Looking forward

Hopefully in the near future, the nuances experienced in this project will go away and thus make the code even more simple, light, and robust. This mostly boils down to better support of WebVTT more consistent rendering of HTML5 controls. There are also plans to enhance the player further, including adding support for multiple caption files and support for audio description.

Summary

It’s time we make video on the web quick and easy to implement with accessibility in mind, not plugins. The Accessible HTML5 Video Player project helps make this happen. HTML5 video is well on it’s way to being the global solution for web-based video, but at least for now, not without several browser support and rendering issues remaining.