Seeking to a location in a 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 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 using ActionScript.

This page covers the following topics:

• Seek to cue point name
• Seek to time
• Seek to percent
• Cue point event handling

Tip: Seeking to a specific time within a progressive file only works accurately if navigation cue points are embedded at the time of encoding. Navigation cue points force the FLV to generate a whole keyframe at the location in the video where the cue point is added. This is necessary for the playhead to land on the exact spot in the footage as you are defining the navigation for a video file.

Beyond seeking to exact locations marked by navigation cue points, progressive video does not seek accurately at all times. If you scrub or seek to a time in the video that does not have a whole keyframe associated with it, the playhead will jump to the nearest whole keyframe. To accurately seek in all situations, you must use streaming video supplied by a Flash Media Server.

Seek to cue point name

You can accurately seek to an embedded navigation cue point by using the cue point's name. The following steps show how to create a button that will seek to the cue point named 'introduction'.

1. Create a new ActionScript 3 FLA file and rename the default layer 1 to assets.
2. Drag an 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. Create a button symbol and place an instance of the button next to the display.
5. Name the button instance seek_btn in the Property inspector.
6. Add a new layer and name it actions.
7. 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";
   
   // Set video
   flvControl.source = flvSource;
   
   // Add seek functionality to the button
   function seekHandler(event:MouseEvent):void
   {
      flvControl.seekToNavCuePoint("introduction")
   }
   seek_btn.addEventListener(MouseEvent.CLICK, seekHandler);

8. Update the introduction cue point name in the code with the name of your intended cue point.
9. Export the SWF (Control+Enter) to see the results.

Seek to time

You can also seek to a specific time within your video.

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 seekToTime_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:

   // Add seek to time code
   function seekToTimeHandler(event:MouseEvent):void
   {
      var sec:Number = 2;
      flvControl.seek(sec);
   }
   seekToTime_btn.addEventListener(MouseEvent.CLICK, seekToTimeHandler);
   

5. Update the sec variable value to use the time you'd like to target.
6. Export the SWF (Control+Enter) to see the results.

Seek to percent

You can seek to a percentage to jump to a location by specifying the percent complete.

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 seekToPercent_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:

   // Add seek to percent code
   function seekToPercentHandler (event:MouseEvent):void
   {
      var percent:Number = 20;
      flvControl.seekPercent(percent);
   }
   seekToPercent_btn.addEventListener(MouseEvent.CLICK, seekToPercentHandler);
   

5. Update the percent variable value with the percentage of time you'd like to target.
6. Export the SWF (Control+Enter) to see the results.

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 Adobe Media Encoder CS4.

Cue point event handling

A related tangent to seeking is handling cue points. Embedded cue points are the key to successful navigation within progressive video. This technique is often used to let the video power synchronization in the user interface. The following steps demonstrate how to listen for video cue points and navigate to frame labels with the corresponding names.

1. Continue working in the same file as the previous example.
2. 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:

   // Add cue point handler code
   function cuePointHandler(event:MetadataEvent):void
   {
      trace("name = "+event.info.name);
      trace("time = "+event.info.time);
   
      // Go to a frame label with the cue point name
      gotoAndStop(event.info.name);
   }
   
   flvControl.addEventListener(MetadataEvent.CUE_POINT, cuePointHandler);
   

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

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

Page 5 of 7

Previous Page

Next Page