FLV Streaming Video Player
Custom Flash Programming ~ Tutorial & Code Samples
July 27, 2010
   
Research
How does Adobe Captivate interact with Adobe Flash Media Streaming Server?

The short answer: Adobe Captivate generates an F4V video file. The F4V file is stored on a server hosting Adobe Flash Media Streaming Server software. However, users need a way to access these F4V video files.

 

Note: Adobe Captivate (version 5) will generate an F4V file. However older versions of Adobe Captivate (such as version 4) will only generate an AVI file. In this case you will need to use a converter utility such as Sorenson Squeeze in order to convert the video to an FLV file. Both F4V and FLV files will work with Adobe Flash Media Streaming Server.
 
Objective
To present the visitor of your web page with a user interface for selecting which FLV streaming video they want to watch. Furthermore, the next video will play automatically after the first one is finished. Finally, add controls so that the user can play or pause the video; add a progress bar "seek bar" so that the user can view the progress of the video and use the seek bar to scrub through the video (similar to rewind / fastforward).
 
Background
There is very little documentation on the internet regarding how to create a front-end interface for launching FLV videos which stream from Adobe Flash Media Streaming Server. Adobe Flash Media Streaming Server is a piece of server software that you purchase and install on your web server. You then store your FLV files on that server for streaming access by users.

There is also very little documentation on the internet regarding how Adobe Captivate interacts with Adobe Flash Media Streaming Server. Adobe Captivate is a screen capture program which is great for creating demos or instructional videos. Ironically, Adobe Captivate version 4 only exports content in FLV format if (and only if) you choose to use the Adobe Acrobat Connect Pro service instead of Adobe Media Streaming Server. However, if you use Adobe Captivate version 5, you can directly export to F4V format, which can be used instead of FLV format in Adobe Media Streaming Server.
 
Overview
1) Present the user with a Table Of Contents (TOC) containing links to all of your FLV videos
2) Allow the user to click on any link in the TOC at any time, in order to fetch a new video to watch.
3) Once the current video finishes playing, automatically play the next video listed in the TOC.
4) Provide playback controls such as play, pause, and a scrubber (seekbar).
 
Assumptions
1) I have successfully installed Adobe Flash Media Streaming Server.
2) I am using Adobe Flash CS4 Professional, which uses Actionscript version 3.0 (AS3).
3) Adobe Captivate version 4 or version 5 will work (as noted above).
 
Procedures
Step #1 - Transfer your FLV videos to the server
For this project we want the FLV videos to have dimensions 700px by 460px. It is best if you originally record your content at this resolution, because converting the dimensions of the video later will result in sub-par quality. While simply converting the file type (say from AVI to FLV) does not have a significant impact on perceived quality. Later in this project, more of the screen width will be consumed by the Table Of Contents (which will sit to the left of the video). Also, more of the screen height will be consumed by playback controls (which will sit below the video). The overall interface we're building will fit perfectly inside a 1024x768 browser.

Note: For testing purposes you can just save your FLV files locally on your own computer. In this case you need not specify a URL as mentioned below. Merely enter the file name of the FLV file (omitting the path to the file). As mentioned earlier, you can use F4V files instead of FLV files if you desire.

On the server containing the Adobe Flash Media Streaming Server software, navigate to the following path /opt/adobe/fms/webroot/vod   This is where you need to place all of your FLV video files.


Tip: You need to configure your IP address or URL so that it points to /opt/adobe/fms/webroot   (excluding the vod directory), because later we'll have the option of placing the user interface here. But more importantly, we will be calling to these videos via the IP or URL you have established, such as... http://www.simon.kaulius.com/vod/myvideo1.flv
 
Step #2 - Create a new Flash FLA file (named vid1.fla) used to call to the video
Open Flash CS4 and create a new file. For now you can save this FLA file locally on your hard drive. Modify the Flash document size to be 700px by 495px This gives us some room below the video to place the playback controls (play,pause,seekbar).

Create 3 keyframes on the timeline. Click on the second keyframe and then navigate to the Components tab (if you don't see this tab, then go to the Window menu and select Components). In the Components tab navigate to the Video section and then drag the FLVPlayback component onto the stage.

Navigate to the Properties tab and give the component an Instance Name of videoInstructions. Next, go to the Component Inspector tab and double click the source field. Enter the IP or URL path to your FLV video file. You can prefix your IP or URL with either http:// or rtmp://. (See the tip below for more information). Make sure the checkbox is checked for "Match source dimensions". Click OK.


Tip: At this time if you try to preview your Flash project, nothing will happen. We'll add some Actionscript3 code later to make it all work.

Note that the rtmp:// prefix is Adobe's own proprietary protocal, while http:// is standard web protocal. You can use either prefix while leaving your FLV video file in the same location in the vod folder. From my experience, the http method performs better (quicker). Further research is needed to understand the benefits of rtmp.

 
Step #3 - Add playback controls to your FLA file
Make sure you are still working in frame 2 of the timeline. Now in the Components tab navigate to the Video section and then drag the PlayPauseButton component onto the stage. Navigate to the Properties tab and give the component an Instance Name of mypause. Now in the Components tab navigate to the Video section and then drag the SeekBar component onto the stage. Navigate to the Properties tab and give the component an Instance Name of myseeker.

Tip: You can stretch (increase the width of) the seekBar as much as you want. The component is smart enough to adjust its representation/functionality of the FLV movie timeline appropriately.

Note that you can modify the seekBar playHead (triangle marker) by double-clicking on the seekBar and then navigating to its frame 2. There you will find the playHead. You can increase the hit area as well as the size, color, and shape of the playHead.

 
Step #4 - Add Actionscript (AS3) code to your FLA file
Click on frame 1 of the timeline, then navigate to the Actions tab. Enter the stop code (shown below) as the action for this frame. Then repeat this process for frame 3.

Now click on frame 2 of the timeline, then navigate to the Actions tab. First we need to import a couple libraries so that we can use code from them.

Next we need to affiliate the playback controls with the video object. (Remember that earlier we added an FLVplayback object called videoInstructions to the stage).
Add the following code:

When this flash file is called by the user, it will wait at frame 1 until we tell it to go to frame 2 (and play the video). However, once frame 2 is finished (e.g. the video has finished playing) we want this flash file to automatically go to frame 3. Later, we will perform a check to see what frame its on. If its on frame 3, we know the video has finished playing, and then we can queue the next video. Because we want an action to occur once the video finishes playing, we need to put a listener on the video object. In the following code, once the "playing of the video" is complete we will call a function named goNext.

Now we need to define the function called goNext.

You should now save your FLA file, and also publish it as a SWF file. For the sake of continuity, I'm including the complete code for frame 2 here:

Tip: You should preview your FLA file by hitting Ctrl + Enter. Then hit Enter to start playing the movie. Most likely, your video as well as your playback controls will not be aligned properly on the screen. Now is the time to fine tune the placement of these objects on your stage. Just drag the objects around your stage and then preview them again. Repeat, until everything is lined up the way you want it. You will then need to duplicate this FLA file for every video you have. In the Component Inspector tab change the source for each FLA file. Save each FLA file with a different file name, and publish them as SWF files.
 
At this point you should have several SWF files, each related to a different FLV video. Now we need to build a user interface so that the user can select which video they want to watch. Furthermore, this user interface will automatically call the next video once the current video has finished playing.

You'll find Step #6 on the following page . . .

Learn how to build a custom Flash user interface for FLV streaming video playback >>>
 
 

 Articles
   
click to read . . .
 

 Services
   
Project Management
Full SDLC Management,
Vendor Management,
Resource Management,
Timeline Management,
Risk Management
 
Business Analysis
Requirements Gathering, Systems Analysis, Design, Testing, Implementation, Documentation
 
Application Development
Paperless Information Systems,
Point of Sale Systems,
Gift Card Systems,
Human Resource Systems,
Medical Patient Tracking,
Digital Medical Patient Charts,
Online Shopping Carts,
Smartphone Apps (Palm Pre)
 
Systems Administration
Computer Network Installation,
Server Maintenance & Backup, Database Management,
Computer Maintenance & Repair
 
Graphic Design
Websites, Logos, Brochures, Magazine Ads, Business Cards