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
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.
WEBVTT FILE 1 00:00:00.500 --> 00:00:03.000 D:vertical A:start Sparrow Chuckles 2 00:00:06.000 --> 00:00:12.000 <c.highlight>Big Buck Bunny</c> 3 00:00:19.000 --> 00:00:23.000 Bunny Awakes 4 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. </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> <button class="btn-cc"><span>CC</span></button> <button class="btn-fullscreen"><span>FS</span></button> </div> </div>
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.
Adding a Video with CC & full screen function will enhance user experience and interaction with user.