Closed Captioning Made Easy

Originally published on the Clarify.io blog. View archived copy.

Until just a few years ago, Closed Captioning for online videos was a second thought to most people. Now it can and should be at the top of your agenda. While it was originally designed for the hearing-impaired, it’s useful in any scenario with lots of background noise – an airport or bar – or even when sound is not an option, like in on a bus.

Regardless of the reason, Closed Captioning is incredibly important but still more complicated than it needs to be. First, you create a full transcript, then add timestamps to exactly when words are said, and then you convert it into the format required for your player or maybe into each of the formats you need.

We have a better way.

Getting Closed Captions for your Videos

First, get your video file ready. We recommend using our partner Brightcove, you can use any video platform to host your files. You can even download YouTube videos if you need.

Next, load your video into Clarify. Depending on your preferred language, this is 1-3 lines of code. Here’s a sample using curl, just add your API Key:

In the response, you’ll get a key – called “self” – which you’ll need for the next step.

Next, order the captions. Since captions are a premium feature, we don’t automatically create them for you. We like surprise charges about as much as you do. 😉 To get them rolling, take the “self” key from the previous step and order the options like so:

In this response, you’ll get a key – called “self” – which you’ll need for the next step.

Note: If you use a video from our Sample Media, the captions will be available immediately. If you use your own file, remember it can take up to 72 hours before the captions are available.

Next, once your captions are ready, you use the “self” key from the previous step to retrieve a list of the available formats:

At present, we provide the SRT, VTT, TTML, and SCC formats which covers all of the major providers and players. SRT is the most common and should suit most of your needs but if we add new formats, they’ll be listed in that response.

Now that we have the video and the captions, let’s combine them with our favorite player.

Adding Closed Captions to Video.js

Using the open source HTML5 video player Video.js is incredibly easy. You can plug it into just about any site and allows you to host videos on anything from Vimeo to YouTube to raw URLs. The Video.js quickstart is pretty trivial and requires three steps:

First, embed the libraries into your document’s head. This is using their CDN but you can host them yourself:

Next, embed your video including the captions as a separate track. Track usage isn’t covered in the quickstart but luckily their docs are great.

Note: If you’re serving the video and captions from different domains – such as your CDN and your website – make sure to enable CORS. (This one has bitten me more than I care to admit.)

Finally, refresh your page and push play. Voila! You have captions!

Add Closed Captions to Brightcove

Alternatively, if you use a video management platform like Brightcove, it’s even easier.

First, make sure you’re using one of the Accessible Video Player Templates. This will handle embedding the captions file in the right place and displaying them once they’re uploaded.

Next, you need to attach the captions file to your media. Within the Brightcove Dashboard, select the Media module, then the Advanced tab, and then find the Closed Captioning box pictured:

Upload the file you downloaded from the Clarify API and you’re all set. While you can host the file remotely, we recommend keeping it within Brightcove for convenience and easier tracking.

Finally, refresh your page and push play. Voila! You have captions!

Note: Technically the Brightcove player is Video.js plus some additional components so you could choose that option but this is the recommended way. More detailed information is available in their Brightcove’s Closed Captioning Guide.

The Next Step: A Real Video Management Pipeline

In both of the examples above, I’ve made a major assumption: You’re doing this manually.

As a few of our customers have figured out, with a little planning and judicious use of our and Brightcove’s API, your media pipeline can be automated. Whenever a video is uploaded to Brightcove, you can pass it to Clarify for indexing, request the captions, and then catch the “captions complete” callback and load them back into Brightcove via the API. You’d be shocked how little code it takes. The imporant part is this happens behind the scenes without adding steps or – even better – allowing you to drop steps from your current workflow.

If you need additional formats or want to know the detailed steps, check out our Closed Captioning Quickstart to get started in minutes.

And if you want to get a more advanced, you can add our video search directly via our Video.js Search Plugin. It works equally well with regular Video.js or through Brightcove.