Adding seek functionality with cue points

You can embed Navigation cue points in an FLV file to add seeking functionality to your applications. The seekToNavCuePoint() method of the FLVPlayback component locates the cue point in the FLV file with the specified name, at or after the specified time. You can specify a name as a string (such as "part1" or "theParty").

You can also use the seekToNextNavCuePoint() method, which seeks to the next navigation cue point, based on the current playheadTime. You can pass the method a parameter, time, which is the starting time from where to look for the next navigation cue point. The default value is the current playheadTime.

Alternatively, you can also seek to a specified duration of the FLV file, using the seek() method.

In the following examples, you add a button that you use to jump between cue points or a specified duration in a FLV file that plays in the FLVPlayback component, and a button to jump to a specified cue point.

To seek to a specified duration:

  1. Create a new Flash document called seekduration.fla.
  2. Drag an instance of the FLVPlayback component from the Components panel (Window > Components).

    The component is in the FLVPlayback - Player 8 folder.

  3. Select the component and open the Property inspector (Window > Properties > Properties).
  4. Type my_flvPb in the Instance Name text box.
  5. Drag an instance of the Button component from the Components panel to the Stage.
  6. Select the Button component and type seek_button in the Instance Name text box.
  7. Select Frame 1 on the Timeline and type the following code in the Actions panel:
    import mx.controls.Button;
    import mx.video.FLVPlayback;
    var seek_button:Button;
    var my_flvPb:FLVPlayback;
    my_flvPb.autoPlay = false;
    my_flvPb.contentPath = "http://www.helpexamples.com/flash/video/sheep.flv";
    seek_button.label = "Seek";
    seek_button.addEventListener("click", seekFlv);
    function seekFlv(eventObj:Object):Void {
        // seek to 2 seconds 
        my_flvPb.seek(2);
    }
    
  8. Select Control > Test Movie to test your code.

    When you click the button, the video playhead moves to the duration that you specify: 2 seconds into the video.

To add seeking functionality with the FLVPlayback component:

  1. Create a new Flash document called seek1.fla.
  2. Drag an instance of the FLVPlayback component from the Components panel (Window > Components).

    The component is in the FLVPlayback - Player 8 folder.

  3. Select the component and open the Property inspector (Window > Properties > Properties).
  4. Type my_flvPb in the Instance Name text box.
  5. Drag an instance of the Button component from the Components panel to the Stage.
  6. Select the Button component and type my_button in the Instance Name text box.
  7. Select Frame 1 on the Timeline and type the following code in the Actions panel:
    import mx.video.FLVPlayback;
    var my_flvPb:FLVPlayback;
    my_flvPb.autoPlay = false;
    my_flvPb.contentPath = "http://www.helpexamples.com/flash/video/cuepoints.flv";
    my_button.label = "Next cue point";
    
    function clickMe(){
      my_flvPb.seekToNextNavCuePoint();
    }
    my_button.addEventListener("click", clickMe);
    
  8. Select Control > Test Movie to test your code.

    The cuepoints.flv file contains three navigation cue points: one each near the beginning, middle, and end of the video file. When you click the button, the FLVPlayback instance seeks to the next cue point until it reaches the last cue point in the video file.

You can also seek to a specified cue point in an FLV file by using the seekToCuePoint() method, as shown in the following example.

To seek to a specified cue point:

  1. Create a new Flash document called seek2.fla.
  2. Drag an instance of the FLVPlayback component from the Components panel (Window > Components).

    The component is in the FLVPlayback - Player 8 folder.

  3. Select the component, and open the Property inspector (Window > Properties > Properties).
  4. Type my_flvPb in the Instance Name text box.
  5. With the FLVPlayback instance still selected, click the Parameters tab.
  6. Type http://www.helpexamples.com/flash/video/cuepoints.flv in the contentPath text box.

    When you type the URL in the contentPath text box, the cue points appear in the Parameters tab (next to cuePoint parameter). Therefore, you can determine the name of the cue point that you want to find in your code. If you click the magnifying glass icon, you can view all of the video file's cue points and information about each cue point in a table.

  7. Drag an instance of the Button component from the Components panel to the Stage.
  8. Select the Button component and type my_button in the Instance Name text box.
  9. Select Frame 1 on the Timeline and type the following code in the Actions panel:
    import mx.video.FLVPlayback;
    var my_flvPb:FLVPlayback;
    my_flvPb.autoPlay = false;
    my_button.label = "Seek to point2";
    
    function clickMe(){
      my_flvPb.seekToNavCuePoint("point2");
    }
    my_button.addEventListener("click", clickMe);
    
  10. Select Control > Test Movie to test your code.

    The cuepoints.flv file contains three navigation cue points: one each near the beginning, middle, and end of the video file. When you click the button, the FLVPlayback instance seeks to the specified cue point (point2).

For more information on cue points and the FLVPlayback component, see ActionScript 2.0 Components Language Reference.