Tutorial – Playing Video with SubTitles in AS3 – Part 1

3 actionscript,as3,as3 tutorials,flash,youtube  |   December 10, 2009  |     4196

Hi Everyone,

The series on Playing FLV files in AS3 was probably the most popular post on this blog. So I thought I would take it one step further: show SubTitles from an .SRT file over the FLV while it is playing.

First, you need to read this post by Jankees van Woezik. He did a great job at making a SRT parser, although; well, I wouldn’t convert everything right away but rather do it on-demand; but that is a small detail.

Then you need to find yourself a SRT file. There are plenty on the internet, I took the Star Wars subtitles, changed the time a little bit, and ended up with this SRT file.

The video I chose I got using TubeGrip, it is basically a Telemark skiing video, which I love and miss. This video is a mp4 format using H.264 codec, which is supported by Flash Player 10 and over. Much more pretty. You can get those from TubeGrip off YouTube.

Now, that being said, I will use

  • a flash.display.Video object to display Video
  • a newcommerce.media.FLVPlayer object to control & play the Video
  • a nl.inlet42.data.subtitles.SubTitleParser to parse the SRT file
  • a flash.net.URLLoader object to load the .srt file
  • a an array of nl.inlet42.data.subtitles.SubTitleData objects where the subtitle data is stored in a usable form

We need to create a component, or Control as I like to call them, which will take SubTitleData objects one at a time and display it.

This component needs to do the following:

  • Position itself appropriately on the stage, taking for granted the video is taking full stageWidth & stageHeight.
  • Show a dark background on which a textfield containing white text will appear
  • Render the subtitle text appropriately

First, I derive this control from newcommerce.controls.BaseControl which I started to dissect here but unfortunately never finished.. (I will one day; hopefully). Basically it implements a frame to work in, which streamlines the main operations you need to deal with when making a visual component.

Then for the creation of the control, I use the example.SubtitleViewerProperties class which contains all the information needed to create the component. Here is the source:

So basically, Font, stage reference, width and height.

SubtitleViewer Code
Description is inside of the code. Please read comments for details..

There we got for part 1. Second part (tomorrow), I will show how to put it all together. Full source code is here if you are interested..




Leave a Reply