Accessible HTML5 Video Player w/ Closed Caption (CC)

HTML 5 Video w/Closed Caption Thumbnail
HTML 5 Video w/Closed Caption Thumbnail

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.

Above is a small example of .vtt file which shows when & where to display the text on video. 00:00:00.500 --> 00:00:03.000 shows time on video to display text written in next line.

To integrate the CC in video we need to add only two new line in the code shown as dark in below code. The last dark line in the code is to implement the fullscreen button.

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.

Javascript implementation is same as in previous post. You can download the updated Script file and replace the previous one in your project.

View Demo

Summary

Adding a Video with CC & full screen function will enhance user experience and interaction with user.

Ashish Panchal

Web/ UI & Front-end developer based in Ahmedabad, GJ, India. Here to help/ discuss community to spread web awareness.

You may also like...

2 Responses

  1. December 29, 2016

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

  2. January 9, 2017

    […] continuation to my earlier post for Video, I further dig-out on video […]

Leave a Reply

Your email address will not be published. Required fields are marked *