Playing, pausing, and stopping a video

Starting, pausing, and stopping a video are very common controls that are needed when programming video user interfaces. Note that these controls can be accessed through the FLVPlayback custom UI components included in Flash CS4 Professional. The custom UI components are simple to use, however there will be many times when you'll need to access the FLVPlayback commands directly via programming as demonstrated in the next part of this article.

This section covers the following topics:

• Simple commands
• Looping
• Toggle play and pause
• Stop and reset

Simple commands

You'll probably find that most custom functionality with video revolves around events generated in the video's life cycle. But at the core of it all, you will also use a lot of simple commands like those shown in the list below. Notice how each command starts with the instance name of the FLVPlayback component—in this case, we've named our instance of the FLVPlayback component display.

To apply a play command, use the following code:

display.play();

The play command now supports three parameters: source, totalTime, and isLive. You can initialize these values in the constructor similar to the following code:

display.play("videos/myVideo.flv", 32, false);

To apply a pause command, use the following code:

display.pause();

To apply a stop command, use the following code:

display.stop();

Looping

The ability to loop a video can be very useful. The following steps show how to listen for the video's complete event and then restart playback from the beginning.

To create a looping video:

1. Create a new ActionScript 3 FLA file and rename the default layer 1 to assets.
2. Drag and instance of the FLVPlayback component from the Components panel to the Stage. Position and resize the component as desired.
3. Name the instance display in the Property inspector.
4. Add a new layer and name it actions.
5. Select the keyframe on Frame 1 of the actions layer and open the Actions panel. Add the following code in the text editor:

   import fl.video.*;
   				
   // Video component instance name
   var flvControl:FLVPlayback = display;
   var flvSource:String = "Call_to_Action.flv";
   
   // Loop the video when it completes
   function completeHandler(event:VideoEvent):void
   {
      flvControl.seek(0);
      flvControl.play()
   }
   flvControl.addEventListener(VideoEvent.COMPLETE, completeHandler);
   
   // Set video
   flvControl.source = flvSource;

6. Update the flvSource variable with the URL of your FLV.
7. Export the SWF (Control+Enter) to see the results.

Toggle play and pause

You can use the FLVPlayback's ActionScript API to create your own custom buttons and controls. The following steps show the code that toggles playback on and off by using a custom button.

To toggle play and pause:

1. Continue working in the same file as used in the previous example. Select the assets layer again.
2. Create a button symbol and place an instance of the button next to the display.
3. Name the button instance 'toggle_btn' in the Property inspector.
4. Select the keyframe on Frame 1 of the actions layer and open the Actions panel. Add the following code continuing from where you left off, as shown below:

   // Add toggle code
   function toggleHandler(event:MouseEvent):void
   {
      if( flvControl.playing ){
         flvControl.pause();
      }else{
         flvControl.play();
      }
   }
   
   toggle_btn.addEventListener(MouseEvent.CLICK, toggleHandler);
   

5. Export the SWF (Control+Enter) to see the results.

Stop and reset

Once you have a looping video in place, it's a good idea to provide a way to stop the video from playing. The following code shows you how to stop and reset a video to stop it from looping.

To stop and reset:

1. Continue working in the same file as the previous example. Select the assets layer again.
2. Create a new button symbol and place an instance of the button next to the display.
3. Name the button instance reset_btn in the Property inspector.
4. Select the keyframe on Frame 1 of the actions layer and open the Actions panel. Add the following code, continuing from where you left off in the previous example:

   // Add reset code
   function resetHandler(event:MouseEvent):void
   {
      flvControl.autoRewind = true;
      flvControl.stop();
   }
   
   reset_btn.addEventListener(MouseEvent.CLICK, resetHandler);
   

5. Export the SWF (Control+Enter) to see the results.

To see a working example, see flvplayback_programming3.fla in the sample files.

Page 4 of 7

Previous Page

Next Page