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.

<video controls>
	<source src="../siteware/videos/BigBuckBunny.mp4" type="video/mp4">
	<source src="../siteware/videos/BigBuckBunny.ogg" type="video/ogg">
	Your browser doesn't support HTML5 video tag.
</video>

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

Attributes

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

View Demo

HTML Code

<div class="video-wrapper">
	<video class="video-player">
		<source src="../siteware/videos/BigBuckBunny.mp4" type="video/mp4">
		<source src="../siteware/videos/BigBuckBunny.ogg" type="video/ogg">
		Your browser doesn't support HTML5 video tag.
	</video>
	<div class="video-controls--wrapper">
		<div class="progressbar">
			<p class="progressbar-time--elapsed">0:00</p>
			<p class="progressbar-time--duration">0:00</p>
			<progress class="progressbar-progress" min="0" max="100" value="0">0% played</progress>
		</div>
		<button class="btn-play-pause"><span>Play</span></button>
		<button class="btn-stop"><span>Stop</span></button>
		<button class="btn-volume"><span>Mute</span></button>
	</div>
</div>

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

All you need to do is to include a javascript file and a small snippet in the main script file. You can download the Download Video Controls Javascript file file and include in your project.

//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");

Continue reading second article which includes Closed caption & Full-Screen functionality.

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.