Fully Customisable & Accessible HTML5 Video Player

In modern browsers, with HTML5 Video Tag it is very easy and simple to include video in page. Unlike earlier we had to include Flash object and to support that we need to add Flash Player Plugin in browsers. Flash player was never bundled with Browsers so when we include flash object in our page we need to ask readers to install plugin first to see the video.

HTML5 Video

Video tag from HTML5 allows us to add Video on a page with all the player controls within the tag. With just couple of lines of code and we have video playing on our page.

The code above will display a video on a page with all controls like – Play, Pause, Volume, Mute & Fullscreen.

Attributes

autoplay*

Tells the browser to immediately start downloading the video and play it as soon as it can. Note that mobile browsers generally do not support this attribute, the user must tap the screen to begin video playback.

preload

Hint to the browser about whether optimistic downloading of the video itself or its metadata is considered worthwhile. Options are:

none – Hints to the browser that the user likely will not watch the video, or that minimizing unnecessary traffic is desirable.

metadata – Hints to the browser that the user is not expected to need the video, but that fetching its metadata (dimensions, first frame, track list, duration, and so on) is desirable.

auto – Hints to the browser that optimistically downloading the entire video is considered desirable.

poster

Provides an image to show before the video loads

controls*

Shows the default video controls (play, pause, etc)

height & width

Sets the width and height of the video in CSS pixels

loop*

Tells the browser to automatically loop the video

muted*

Mutes the audio from the video

*indicates a binary attribute, which enables that behavior when the attribute is present, or has it’s value set to anything.

Supported Browsers

Accessibility

The default HTML5 video doesn’t have accessibility, it is not accessible for the keyboard only users or visibly disabled users. To make site/page with AA+ rating we need to make Video accessible to all the readers. For this we have to add extra video controls and cannot use the default controls ships with the video tag.

The HTML code above shows fully accessible video. To enable the buttons to work with the video tag we have to handle all the functionality with javascript. I have developed the video controls script which handles play, pause, stop & volume/ mute buttons. The script is purely developed in vanilla javascript and doesn’t have any jQuery dependency.

Javascript Code

//Javascript file to include at the bottom page of your page before </body> tag
<script src="video-controls.js"></script>
//Small snippet to include in your main .js file
AP.videoControls.init(".video-wrapper");

Summary

Adding a Video on page is now very and easy and with the accessible controls with the video makes it usable for all types of users and it will also increase user experience as well. As always do let me know your reviews/ suggestions in the comment box below.