If you are new to Actionscript 3, take a look at this tutorial first to get the basics. You will need to download this commercial to do this tutorial.
Why Close Caption your videos?
Close captioning your videos makes them accessible to users with hearing and learning disabilities. For government and in my case, higher education it is the law, your content must be accessible. Another great reason to close caption your videos is for search engines. The captions are stored separately in an XML file and can be parsed out into HTML so a search engine can read them; this makes your vides searchable. This tutorial will cover the basics of the FLVPlayback caption controls, here is what we will be building:
ALTERNATE CONTENT
New FLA Document;
Create a new FLA file and add the following components to the stage: FLVPlayback, FLVPlaybackCaptioning, CaptionButton and PlayPauseButton. These items are located in the “Components” toolbar which can be found by going to [Window]/[Components] or by hitting [Ctrl]+[F7]:
Place the components similar to this:
Click on the video player and bring up the “Component Inspector” window; [SHIFT]+[F7]. Under Skin, choose “None”. Flash has some prebuilt skins (play/pause/volume controls) which are nice but can’t be built upon easily:
In the properties menu, set the “Instance name” to ‘player’:
Click on the FLVPlaybackCaptioning component and set its “Instance name” to ‘captioning’.
Save this file.
ActionScript Document:
Create a new ActionScript document and save it as “CaptionedVideo.as”. Not the capitalizations in the name, as we learned in the beginner ActionScript tutorial this is important. Use the following code:
package{
import flash.display.Sprite;
import flash.events.*
import fl.video.*;
public class CaptionedVideo extends Sprite{
public function CaptionedVideo():void{
player.source = “hector.flv”
}
}
}
Player.source tells the player where the video is located at. We are also importing the events and video class, we will be using that in a little bit.
Go back to your FLA file and in the properties for the document, set the class to “CaptionedVideo”:
Hit publish [Ctrl]+[ENTER]. As the video runs, notice that the Play/Pause button already works. Adobe wrote this control and they have it set up to automatically link the video components together. You will also notice that the Captioning component doesn’t show up, nor does the button work. We will work on those next.
Creating the XML file
Here is the closed caption file for this video. It uses “TimedText”, which is the standard, unfortunately, Quicktime, and YouTube use different formats:
<?xml version=”1.0″ encoding=”utf-8″?>
<tt xml:lang=”en” xmlns=”http://www.w3.org/2006/04/ttaf1″ xmlns:tts=”http://www.w3.org/2006/04/ttaf1#styling”>
<head>
<styling>
<style id=”1″ tts:textAlign=”left” tts:fontSize=”15″ tts:backgroundColor=”gray” tts:fontcolor=”white”/>
</styling>
</head>
<body>
<div xml:lang=”en” style=”1″>
<p begin=”00:00:2.00″>-Why vote Hector?</p>
<p begin=”00:00:05.50″>Because Hector doesn’t need a political platform</p>
<p begin=”00:00:09.50″>He just likes to soak up the rays, look cute and</p>
<p begin=”00:00:13.00″ dur=”4s”>make lots of squishy sounds with his cheaks</p>
<p begin=”00:00:20.00″>You see, like that.</p>
<p begin=”00:00:22.00″>Hector, he’s cute, he’s cuddly,</p>
<p begin=”00:00:25.75″>and he makes squishy sounds with his cheaks</p>
<p begin=”00:00:29.00″>- My name is Hector andI approve this message</p>
</div>
</body>
</tt>
Save this file as “hector.flv”.
Connecting AS3 to TimedText XML:
Add the following code in the “CaptionedVideo” function:
captioning.showCaptions = false;
captioning.source = “hector.xml”;
captioning.flvPlayback = player;
captioning.addEventListener(CaptionChangeEvent.CAPTION_CHANGE, onCaptionChange);
The first line tells flash that the captions will not show by default. There is a bug in flash when they show by default, you have to click the caption button twice to have them show up. The next line connects the captioning component to the XML file. Line 3 connects the video player to the captioning component. The final line is an eventlistener that listens to the players time and the XML file and when there is a change it runs the function onCaptionChange().
Next we need to add the function onCaptionChange():
private function onCaptionChange(e:CaptionChangeEvent):void {
var captionText:* = e.target.captionTarget;
var player:FLVPlayback = e.target.flvPlayback;
}
This code takes the text from the XML file and places it on the stage.
Final Code:
package{
import flash.display.Sprite;
import flash.events.*
import fl.video.*;
public class CaptionedVideo extends Sprite{
public function CaptionedVideo():void{
player.source = "hector.flv";
captioning.showCaptions = false;
captioning.source = "hector.xml";
captioning.flvPlayback = player;
captioning.addEventListener(CaptionChangeEvent.CAPTION_CHANGE, onCaptionChange);
}
private function onCaptionChange(e:CaptionChangeEvent):void {
var captionText:* = e.target.captionTarget;
var player:FLVPlayback = e.target.flvPlayback;
}
}
}
Tags: Accessibility, actionscript
If you found this article helpful please share it. If you have questions please ask them in the Comments section.
[...] week I wrote about closed captions on video players and the week before that I wrote about live streaming commencement. Well, we (UNC) got the proposal [...]
[...] by the W3C (warning: very long). This format is used by ActionScript 3 to display captions. I have a tutorial about doing this here. This format allows for meta data; in the example below I have colors indicated for the caption [...]