Flash video n' related stuff
I’ve had several questions recently about how to add closed captioning to the Dynamic Playlist code in my tutorial on Adobe Developer Connection. I answered a comment on the article, but its not easy to find — so I thought I’d post it here to make it a bit easier.
Yes, this is pretty easy to implement, but is a bit nitpicky. Here’s how you do it.
Just add the URLs of the timed text files to the XML data for each video, like so:
<vid desc=”Popeye for President, Title and Credits”
src=”videos/Popeye_forPresiden256K_flash_popeye.mp4″
thumb=”thumbs/Popeye_forPresiden768K.jpg”
ttURL=”myTTfile.xml” />Then, in the initMediaPlayer function, you’d just add it as an additional attribute (ttURL) in the ‘for’ loop so it can be loaded for each video as it’s clicked, like this:
tileList.addItem({label:item.attribute(“desc”).toXMLString(),
data:item.attribute(“src”).toXMLString(),
ttURL:item.attribute(“ttURL”).toXMLString(),
source:thumb});Add these three new lines of code at the end of the initVideoPlayer function:
myVid.autoRewind = true;
myVidCaptioning.source = tileList.selectedItem.ttURL;
myVidCaptioning.flvPlayback = myVid;And finally, replace the listListener event handler with the following:
function listListener(event:Event):void {
myVid.stop();
myVidCaptioning.source = event.target.selectedItem.ttURL;
myVidCaptioning.showCaptions = false;
myVidCaptioning.showCaptions = true;
myVid.autoPlay = true;
myVid.play(event.target.selectedItem.data);
}
The trick here is to hide then show the captions, so you clear out the data from the previously-selected video. It’s a bother, but this should take care of it.
Then, go into your FLA and drop an FLVCaptioning component onto the Stage, and give it an instance name of myVidCaptioning. Publish, and watch (and read) your videos.![]()
Hope this helps… if you have any trouble…
… download the example code here (video files omitted; you can grab them from the original tutorial files or change the XML to point to your own).
Another option, of course, is to insert embedded cuepoints into your video files for your captions, then use the onCuePoint event handler and display them in a dynamic text box. This is a more custom approach, but the timed text file approach above conforms more to usability standards. Your call.


13 Responses for "Adding captioning to Dynamic Playlist example"
Lisa,
You are AWESOME!!! Everything works perfect…
Thanks so much!
Regards,
Tony
Lisa,
Total Flash/FMS noob here. Got your book today. Have a new account with influxis and I’m trying to do the videoconferencing app from the book. I am trying to modify the .fla file I downloaded from you using CS4. I can’t seem to find the actionscript code to enter the netconnection string. I only see two layers. When I run debug it gives the code from the book, but I’m at a loss as to find where to edit.
Thanks in advance for your help. J.
@John
You’ll need to select the first frame of Layer 2 in the Timeline, then open up the Actions panel. You can enter your NetConnection string there. If you are running the Development edition of FMS locally, you’d use “localhost” in the string.
Let me know if you have any other trouble!
@John
Er, yeah… you did mention that you had an influxis account… duh! So you’d enter the connection string provided by Influxis for your application, with your account number, like so:
rtmp://4xxxx1234xx.rtmphost.com/fvpvideoconf/
Hello Lisa, I find this code works nicely except that it causes the caption hide/play button on the FLVPlayback skin to go away. Captions play great but no way to toggle them once a playlist video is started. For me, this was so running your exact code unmodified. Does this not happen for you? Thanks for your great tutorials, they have helped me a ton.
Hi, I downloaded the file VideoPlaylist and it works on my local computer but when I put it on the domainserver it keeps loading and nothing works. I use the progressive way.
@Mieke
Check your video links… are you sure they aren’t pointing to the files on your local computer? They need to be complete (http://www.yoursite.com/videos/myVideo.flv) or relative (myVideo.flv OR videos/myVideo.flv).
Hi Lisa,
Thank you for the great tutorial!
I’m trying to get the forward and backward buttons to skip to the next and previous video in the xml playlist.
Any idea how I could do this?
Regards, Vik
Those buttons in the component aren’t very useful, unfortunately. You could use them and listen for a fastforward or rewind event on the FLVPlayback component, then switch between movies in your playlist, but I would recommend rolling your own forward and back buttons to avoid any glitches with seeking, etc. You can construct your own playback skin using the button components then grab the art from the forward and back buttons and wire up your own events.
I hope this helps!
Thank you for the prompt replay.
A custom skin it will be!
Hi Lisa,
thanks for the great tuts. I love the dynamic playlist-really easy to use and customize. I am having one problem- when I add buttons for naviagtion(url links) the player stops working. the buttons are fine alone and the player is fine alone, but when i put them togetherin one flash file they do not work. It seems like its looping. What do I need to do?I am a nuby if you could not tell.
@mike
Glad you found the dynamic playlist helpful! Do you have an example posted somewhere I could look at it? (Also a link to the source files would be helpful; I can download them and take a look!)
cheers,
// Lisa
Thanks for all your help. Great work here.
Leave a reply