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
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:
|
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.
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.
8 comments On Fully Customisable & Accessible HTML5 Video Player
This is awesome information and will surely help many people. Please add CC(Closed Caption) also to make it proper accessible.
Yes Sumit, I will add CC and FullScreen option as well in a short while. Stay tuned!
Hi Sumit, I have updated script to include closed caption & full-screen, you can read it @ http://ashishuideveloper.in/2016/12/html5-video-closed-caption-cc/
Pingback: Accessible HTML5 Video Player w/ Closed Caption (CC) - Ashish Panchal ()
Hi,
Your video player seems interesting from accessibility standpoint. can you share a demo & add the code on GitHub..I am collecting accessible video players here https://www.digitala11y.com/accessible-jquery-html5-media-players/
Hi Raghava,
I have added source code to bitbucket, you can find it @ https://bitbucket.org/ashish-panchal/accessible-html5-video-player/overview
Do you mind if I quote a few of your posts as long as I provide credit and sources back
to your blog? My blog is in the very same niche as yours and my users
would truly benefit from some of the information you provide here.
Please let me know if this okay with you. Regards!
Sure, you can do it as long as it links back to my blog 🙂