HTML 5 Video w/Closed Caption Thumbnail

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.


00:00:00.500 --> 00:00:03.000 D:vertical A:start
Sparrow Chuckles

00:00:06.000 --> 00:00:12.000
<c.highlight>Big Buck Bunny</c>

00:00:19.000 --> 00:00:23.000
Bunny Awakes

00:00:23.200 --> 00:00:26.000
Bunny Comes Out

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.

<div class="video-wrapper" data-fullscreen="false">
	<video controls class="video-player" style="width:100%; height: 100%;">
		<source src="BigBuckBunny.mp4" type="video/mp4">
		<source src="BigBuckBunny.ogg" type="video/ogg">
		<track label="English" kind="subtitles" src="developerStories-subtitles-en.vtt" srclang="en">
		Your browser doesn't support HTML5 video tag.
	<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>
		<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>
		<button class="btn-cc"><span>CC</span></button>
		<button class="btn-fullscreen"><span>FS</span></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


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

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

2 comments On Accessible HTML5 Video Player w/ Closed Caption (CC)

Leave a reply:

Your email address will not be published.