Adding captions to online video is becoming a hot topic. If you are a designer/developer working on a video interface and are requested to add captioning then you have to figure out a way that ties the playback of the video to an external file - probably XML - that describes when and for how long a caption should be displayed.

It isn’t a trivial problem.

So when I was updating video.Maru to version 2.0 I made sure that I made it just as easy to add closed captions to your video interface as it is to create the interface with video.Maru in the first place.

Watch a video tutorial covering how to use captions with video.Maru.

Watch a video tutorial covering how to use captions with video.Maru.

Download Source files for captions example

video.Maru makes it very easy to add captions to your videos. Simply create a TextField with an instance name of captions. Then make the text value of the TextField the path to your XML file. The image below shows an example.

Caption XML format

The XML format for the caption data is easy. You can set the attributes for hour, min, sec, and duration for each caption. And then the text that you would like to display as the caption - which can be HTML formated text. That’s about it.

Below is a code sample.

Here’s the code used for the captions in the video below.

If you integrating video.Maru with XML to display a series of videos and you would like to display captions then just add a captions=”path-2-file.xml” attribute to the nodes where you want to display captions. That’s about it.