Accessible HTML5 Video Player w/ Closed Caption (CC)

To have HTML5 Video on page is good and to have it with Closed Caption is even better, as it will make video accessible for physically challenged as well.

This post is in continuation of my earlier post on HTML5 Video. In this post I have covered one of the most important feature of videos, Closed Caption. I received a comment in my earlier post to include the closed caption feature in the script to make it more helpful.

Please refer the one I have posted earlier, to get an idea behind having accessible video. I will cover only two new features that I have added in this post.

Closed Caption

Full Screen

Closed Caption

As video will play CC will display at bottom of the video. We can also create our own file for closed caption. The file is a simple text file with specific format and has .vtt extension.

CC & Full-Screen buttons are toggle buttons. Also “Esc” button on keyboard is to exit the full-screen mode on video. Clicking on CC button will toggle a new class called “on” and on full-screen button it will toggle “exit”. You can style on/off status of the buttons as per your theme.