Video Captioning

I just love this business because you just never know who is checking out your stuff and what will come sliding over the email transom. Having just finished a book for friendsofEd on the subject of Web Video and been out yacking it up, I have obviously, been exploring the "cool stuff" you can do with web video. Then the following email arrives:

"I love your books and tutorials! They are very well explained.  I have a question. Have you done any tutorials on how to add captions to videos? For example, there is CC button in your "Talking Head Video" box. I would love to learn how to write CC for that. I am deaf and would strongly advocate for all websites that have videos to have captions but that wont happen right away due to $ and timing. I will be making a small "Talking Head" video introducing myself in sign language but I want to have captions for hearing people to know what I am saying :-) "

This sort of stuck my feet back on the ground because it told me that in our "quest for cool" there are a whole bunch of people who would like to share in the fun.

To answer the question, "Yes it can be done using CuePoints in Flash Professional 8." The trick is to use an XML document to hold the times for the cue points and the captions. In this example I used a "Tom The Talking Head" clip as the video. I opened it up in QuickTime and jotted down my "words of wisdom" and their respective start points. From there I created a simple XML document in Dreamweaver and saved to to the folder used in this project. The XML is:

<captions>
<caption start="1">Dreamweaver users now have access to Flash Video. Didn't have it before.</caption>
<caption start="3">If you were to talk to a Dreamweaver user about three or four years ago</caption>
<caption start="6">and ask, "Do you want to put video on a web page?"</caption>
<caption start="8">They would look at you and go "Yeah.Dude.Yeah.Right.Uh Huh. Next."</caption>
</captions>

The numbers are the start times for the various bits in the video and the next node is the text.

Here's how I constructed the Flash movie:

  1. Create three layers named Video, Caption and Actions.

  2. Select the Video layer and drag an FLVPlayback component to the stage. In the Parameters set the skin to one that meets your needs. Ignore the contentPath because we'll be adding the video to the ActionScript. Finally, select the component on the stage and give it the instance name of myVid.

  3. Select the Caption layer. Select the text tool and draw out a text box. Set its property to "Dynamic" in the Property inspector and give it the instance name of txtCaption.

The stage

The stage is ready to go.

  1. Select the Actions layer, open the ActionScript Editor and add the following code:

import mx.video.*;

myVid.autoPlay = false;
myVid.contentPath = "Captions.flv";
myVid.autoRewind = true;

var captions:Array;

var captionsXML:XML = new XML();
captionsXML.ignoreWhite = true;

captionsXML.onLoad = function():Void {
captions = this.firstChild.childNodes;

for(var i:Number = 0; i < captions.length; i++) {
myVid.addASCuePoint(Number(captions[i].attributes.start), captions[i].firstChild.nodeValue);
};

};

captionsXML.load("captions.xml");

myVid.addEventListener("cuePoint", onCuePoint);

function onCuePoint(evntObj:Object):Void {
txtCaption.text = evntObj.info.name;
};

The first line of the code brings in the video package because we will need its methods and properties to control the component. The next three lines set the autoplay and contentPath values that would otherwise be used in the Parameters panel. The final line simply resets the video back to the start when it finishes.

An array is then created to hold the captions. With the housekeeping out of the way I create a new XML object to hold the XML and tell the object to ignore any white space in the XML document that will be used by the XML object.

The onLoad method is used to bring the XML document into Flash and the variable - captions - is set to be equal to the number of child nodes in the XML doc. The for loop uses the length of the caption array to set how many times the loop itterates. From there the times and the captions are pulled out of the XML document.

At the same time a number of cue points, equal to the number of items in the list is created and the values in the XML document are used at the parameters for the cue point.

The next two lines simply load the XML document and add an eventListener that tells Flash what to listen for which, surprise,surprise is a cue point. The last function tells Flash that every time a cue point is encountered to stick the text associated with the cue point in the text box.

  1. Save and test the video.

 

 

 

Creative Commons logo