HTML5 Video Captions

You can greatly increase the accessibility of your HTML5 videos if you add text captions to them.  Doing so would enable visitors with hearing disabilities to enjoy your video content.

There are several ways of adding captions to videos, but I will detail one of the simplest.  A few things to keep in mind are:

• This method is for HTML5 video only
• It uses javascript
• It is time consuming

That being said, let’s get on with this.

Transcribe the video

The first step is where most of your time will be spent.  You will need to transcribe (make a written copy of the spoken words) your video and write it out in a special way.  When I say “special way”, I mean that you will have to take the spoken words in your video and list it with timestamps so the browser knows when to display the captions.

To encode the caption to display at the correct time in your video, you have to set a start time and an end time.  These times are measured in seconds, and will look like this:

<span data-begin="7" data-end="12">Umm, you see, yeah we... we didn't budget for this.</span>

Continue doing this until you have gone through your entire video.

Enclose the captions in a div tag

Once you have your entire video transcribed properly, enclose all the lines of code in a div tag with the id of “transcript” like so:

<div id="transcript">
<p>
<span data-begin="0.5" data-end="1">Hi</span>
<span data-begin="1" data-end="3">Is there a problem, sir?</span>
<span data-begin="3" data-end="6">Uh, yes. Umm, a quick question about the final toll.</span>
<span data-begin="6" data-end="7">Yes</span>
<span data-begin="7" data-end="12">Umm, you see, yeah we... we didn't budget for this.</span>
</p>
</div>

Add some javascript

You will need to add a little javascript to the “head” section of your webpage.  This javascript snippet helps make the magic of captioning possible.  The code is as follows:

<script type="text/javascript">
(function(_global) {	
	var captions = [];
	var video;
	var output;
	var caplen;

	window.addEventListener('load', function() {
		output = document.createElement('div'); // JS is enabled, so insert a div to put the captions into
		output.id = 'caption'; // it has an id of caption
		video = document.querySelector('video'); // and it's after the first video element
		video.parentNode.insertBefore(output, video.nextSibling);
		getCaptions();
		video.addEventListener('timeupdate', timeupdate, false);
	}, false);

	// function to populate the 'captions' array
	function getCaptions() {	
		captions = []; // empty the captions array
		var nodes = document.querySelectorAll('#transcript span');
		var node = "";
		var caption = "";
		for (var i = 0, node; node = nodes[i]; i++) {
			caption = {'start': parseFloat(node.getAttribute('data-begin')), // get start time
				'end': parseFloat(node.getAttribute('data-end')), // and end time
				'text': node.textContent};
			captions.push(caption); // and all the captions into an array
		}
		caplen = captions.length;
	}

	function timeupdate() {
		var now = video.currentTime; // how soon is now?
		var text = "", cap = "";
		for (var i = 0; i < caplen; i++) {
			cap = captions[i];
			if (now >= cap.start && now <= cap.end) { // is now within the times specified for this caption?
				text = cap.text; // yes? then load it into a variable called text
				break;
			}
		}
		output.innerHTML = text; // and put contents of text into caption div
	}
	
	// hide transcript div when scripting is enabled
	document.write('<style>#transcript{display:none}</style>');
})(this);

</script>

Add some CSS

After doing all this, you will then need to add some styling rules to position your captions and to make them look nice.  The style rules I added are as follows:

#transcript span {display:table-row;}
#transcript [data-begin]:before {content: " [" attr(data-begin) "s-" attr(data-end)"s]   "; font-size:80%; display:table-cell; padding-right:0;}
#caption { position: absolute; width: 640px; bottom:30px; left: 0; text-align: center; font-family: sans-serif; font-weight: bold; color: white; text-shadow: black 1px 1px 3px; padding-bottom: .5em; }

You will need to have your HTML5 video enclosed in a div tag with the property of “position: relative” as well.

Add your video and captions to your page

The final step is to add your HTML5 video along with your caption code to your webpage.  I use Universal Video to embed HTML5 videos on my site, so after typing in the shortcode I would add the caption code directly beneath the shortcode in my post editor.

If everything was done correctly, your output should work like the video below (which happens to be the popular “The Vendor Client Relationship“).

Note: These captions only work on HTML5 video if the visitor has javascript enabled.  If a visitor comes to your website with javascript turned off, the transcript will appear in its entirety below the video.