Showcase and discover digital art at yex

Follow Design Stacks

Subscribe to our free newsletter to get all our latest tutorials and articles delivered directly to your inbox!

Seek to a Location in the Current Video

Seek to a Location in the Current Video

By including cue points in your video, you can assign navigation points that will allow you to seek to specific locations in the video and synchronize those locations to the content in the Flash movie. If you haven’t done so already, read up on the options available to you for creating cue points. Your easiest route will be to use the cuePoints parameter in the Component Inspector, but you may also embed cue points during video encoding or create cue points dynamically with ActionScript.

There are also two behaviors included that let you jump to a time (in seconds) or percent (completed) within a video.

I discuss these behaviors in this section:

  • Seek to Cue Name
  • Seek to Previous Cue (see note)
  • Seek to Next Cue (see note)
  • Seek to Time
  • Seek to Percent

Note: The Seek to Previous Cue and Seek to Next Cue behaviors work only when navigation (embedded) cue points exist in the FLV file. Navigation cue points must be embedded in the FLV file at the time of encoding. In general, this is a good practice for seeking functionality because navigation cue points are more accurate than ActionScript cue points.

Seek to Cue Name

You can use the Seek to Cue Name behavior to jump to a predefined cue point by using its name as a location marker. To use the Seek to Cue Name behavior:

  1. Add a button to the Stage and select it.
  2. Open the Behaviors panel and click the plus (+) icon to access the list of behavior categories. Select the FLVPlayback Controls category and choose Seek to Cue Name from the list. The behavior’s dialog box opens (see Figure 6).

    Seek to Cue Name dialog box showing that the behavior will make the video jump to the cue point named firstCue

    Figure 6. Seek to Cue Name dialog box showing that the behavior will make the video jump to the cue point named firstCue

  3. Enter the cue point name in the cue name text box.
  4. Browse for the FLVPlayback instance in the target list in the bottom portion of the dialog box. This targets the instance name of the component displaying the video. A best practice is to use the Relative option for the path, as shown in Figure 6. If you have problems adding paths to component buttons, try using the Absolute option instead.
  5. Click OK.

Here’s the code that is added to the button:

// Seek to Cue Name Behavior

var c = this.myVideo.findCuePoint("firstCue");
this.myVideo.seekSeconds(c.time);

// End Seek to Cue Name Behavior

Note: The Seek to Cue Name behavior works with both navigation and ActionScript cue points.

Seek to Previous Cue

You can use the Seek to Previous Cue behavior to jump back to the cue point closest to the current playhead time. To use the Seek to Previous Cue behavior:

  1. Add another button to the Stage and select it.
  2. Open the Behaviors panel and click the plus (+) icon to access the list of behavior categories. Select the FLVPlayback Controls category and choose Seek to Previous Cue from the list. The behavior’s dialog box opens (see Figure 7).

    Seek to Previous Cue dialog box with the selected component instance

    Figure 7. Seek to Previous Cue dialog box with the selected component instance

  3. Browse for the FLVPlayback instance in the target list in the bottom portion of the dialog box. This targets the instance name of the component displaying the video.
  4. Click OK.

Here’s the code that is added to the button:

// Seek to Previous Cue Behavior

this.myVideo.seekToPrevNavCuePoint();

// End Seek to Previous Cue Behavior

Note: The Seek to Previous Cue behavior works only if navigation cue points exist in the FLV file. Navigation cue points are embedded during the time of ecoding.

Seek to Next Cue

You can use the Seek to Next Cue behavior to jump forward to the cue point closest to the current playhead time. To use the Seek to Next Cue behavior:

  1. Add another button to the Stage and select it.

  2. Open the Behaviors panel and click the plus (+) icon to access the list of behavior categories. Select the FLVPlayback Controls category and Seek to Next Cue from the list. The behavior’s dialog box opens (see Figure 8).

    Seek to Next Cue dialog box showing the selected component instance

    Figure 8. Seek to Next Cue dialog box showing the selected component instance

  3. Browse for the FLVPlayback instance in the target list in the bottom portion of the dialog box. This targets the instance name of the component displaying the video.
  4. Click OK.

Here’s the code that is added to the button:

// Seek to Next Cue Behavior

this.myVideo.seekToNextNavCuePoint();
// End Seek to Next Cue Behavior

Note: The Seek to Next Cue behavior works only if navigation (embedded) cue points exist in the FLV file.

Seek to Time

You can use the Seek to Time behavior to jump to a specific time in seconds. To use the Seek to Time behavior:

  1. Add another button to the Stage and select it.
  2. Open the Behaviors panel and click the plus (+) icon to access the list of behavior categories. Select the FLVPlayback Controls category and choose Seek to Time from the list. The behavior’s dialog box opens (see Figure 9).

    Seek to Time dialog box showing that the behavior will cause the video to seek to 2 seconds

    Figure 9. Seek to Time dialog box showing that the behavior will cause the video to seek to 2 seconds

  3. Enter a number in the time in seconds text box.
  4. Browse for the FLVPlayback instance in the target list in the bottom portion of the dialog box. This targets the instance name of the component displaying the video.
  5. Click OK.

Here’s the code that is added to the button:

// Seek to Time Behavior 

this.myVideo.seekSeconds(2);

// End Seek to Time Behavior

Seek to Percent

You can use the Seek to Percent behavior to jump to a location by specifying the percent complete. To use the Seek to Percent behavior:

  1. Add another button to the Stage and select it.
  2. Open the Behaviors panel and click the plus (+) icon to access the list of behavior categories. Select the FLVPlayback Controls category and choose Seek to Time from the list. The behavior’s dialog box opens (see Figure 10).

    Seek to Percent dialog box showing that the behavior will cause the video to seek to 95% along its timeline

    Figure 10. Seek to Percent dialog box showing that the behavior will cause the video to seek to 95% along its timeline

  3. Enter a number in the percent value text box.
  4. Browse for the FLVPlayback instance in the target list in the bottom portion of the dialog box. This targets the instance name of the component displaying the video.
  5. Click OK.

Here’s the code that is added to the button:

// Seek to Percent Behavior

this.myVideo.seekPercent(95);

// End Seek to Percent Behavior

Tip: The Seek to Percent behavior won’t work if you use it with older FLV files that do not have metadata embedded in them. If this occurs, you can work around the problem by encoding the video to the FLV format again using the Flash 8 Video Encoder, or you can manually define the totalTime property in the FLVPlayback parameters so that the component can define the correct percentage.

Comments