Create a Closed Caption Video Player Skin

March 24, 2010

On Monday we created a closed captioned video player using flash and ActionScript 3.0. For the next part of this tutorial we will take our existing code and change our player into a skin. Right now, the player from Monday can only play our Frontier Airlines commercial. If we want it to play a different commercial, we would have to go into the ActionScript file, change the source name and then re-render the flash file. This creates duplicate flash files, we now have two players, two videos and two closed caption files. Let’s simplfy the process so we only have one video player.

Assets:

The only new item that you will need is SWFObject.js. Save this file in the same directory as your flash files and video files.

We will be using the same video and closed caption file that we used in the last tutorial.

HTML Document:

Create a new HTML file and paste the following code in between the <body> tags:

<script type=”text/javascript” src=”swfobject.js”></script>

<p id=”player2″>alternate content</p>

<script type=”text/javascript”>

var s2 = new SWFObject(“myPlayer.swf”, “videoPlayer”, “340″, “290″, “9″);

s2.addVariable(“videoName”, “hector”);

s2.write(“player2″);

</script>

This code configures the flash file, the dimensions of the file and what the minimum version of flash required is:

new SWFObject(“filename.swf”, “instancename”, “width”, “height”, “minimum flashVersion”);

In flash I resized my player to 340,290.

I am adding a variable named “videoName” and passing it the value “hector”. Later, in ActionScript we will grab this variable:

s2.addVariable(“videoName”, “hector”);

This code uses SWFObject.js and rewrites the DIV ‘player2′ as our video content.

s2.write(“player2″);

ActionScript 3:

We need to grab the variable “videoName” from the JavaScript above. Under the class definition add the following line:

var videoFile = loaderInfo.parameters.videoName;

We have created a new variable called “videoFile” and assigning it the value that was given in the javascript file.

Now the last thing you need to do is replace the player.source and captioning.source:

player.source =videoFile+ “.flv”;

captioning.source =videoFile+ “.xml”;

When you publish, you will get an ‘Unhandled ioError’; this is because the variable videoFile has no value. After your publish, open up your HTML document, and the variable videoFile will be assigned the value “hector” and the video will run correctly.

Final AS3 Code:

Now instead of re-rendering out a new SWF file for each video, you can change the Javascript videoName variable and connect to different video sources. Bold lines are new or updated from Monday’s tutorial.

package{

import flash.display.Sprite;

import flash.events.*

import fl.video.*;

public class CaptionedVideo extends Sprite{

var videoName = loaderInfo.parameters.videoFile;

public function CaptionedVideo():void{

player.source =videoFile + “.flv”;

captioning.showCaptions = false;

captioning.source =videoFile + “.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: , , , ,

Comments are closed.

«
»