Captionator.js

Video Captioning in HTML5

At first glance, video captioning might not seem like a huge deal. Maybe it might appeal to you if you need to meet accessibility requirements in your workplace, or you're just doing it to be nice to people with hearing difficulties.

You're pretty far from the mark though. Yes, accessibility is an important driver for video captioning on the web. But it's about much more than ‘deaf people’ (and you should be providing quality captioning for them anyway!)

In addition to important accessibility benefits, captioning your video can allow automatically generated transcripts, text search-ability within videos (imagine what will be possible once Google supports crawling WebVTT!), chapter markers and powerful metadata capability, and much more! You could provide a track of time-specific comments on the video (the same way SoundCloud allows commenting on specific parts of audio) or even a live twitter feed on your video (similar in style to the ABC'S Q&A program.)

“Alright!”, you say. “I'm convinced. How does HTML5 allow me to caption my video?”

For a while, there wasn't an easy way to do it. Guys like Bruce Lawson were coming up with creative ways (if a little hacky) to implement support, in lieu of a proper standard.

Now, however, there's a really nice way to provide support - the HTML5 <track> element and its associated JavaScript API. There's a slight catch though. No currently shipping browser supports either of these features/standards. They will soon - Webkit has support in development, and Firefox can now parse the <track> element (but can't do anything with it yet.)

But you want to caption your HTML5 video now. And for that, you need Captionator.js.

Captionator.js

Captionator.js is a JavaScript polyfill designed to provide support for the <track> element and TextTrack javascript API. It currently supports subtitles in SUB, SRT, Youtube's SBV, WebVTT, and WebVTT with Google's proposed timestamp syntax. It will soon support LRC, DFXP/TTML and the WebVTT v2 proposed features.

Like most polyfills, it's intended to be a drop-in addition to your existing HTML5 video (and/or custom player) and provides a JavaScript API in line with the WHATWG's specification. This makes it easy to write your own interface for allowing the user to select assistive or media enhancement tracks, and when browsers land support for the feature, it'll move out of the way and let the browser take over (and you won't have to change a line of code!)

Captionator.js will automatically detect and enable <track> elements specified in markup - it's a totally painless solution! See the Captionator.js documentation to get started!

Captionator.js Out & About

• Captionator was recently recommended and demonstrated by Jer Noble of Apple at WWDC 2011! Check out Session 502: Advanced HTML5 Media Controllers. (Unfortunately, you'll need to sign up for a free Apple Developer account - it's a great video though!.)
• Silvia Pfeiffer presented on WebVTT to an audience at GoogleIO in March this year, and used Captionator.js for the demo. This is a great talk for getting your head around WebVTT as a format.