Controlling web video with ActionScript 3 FLVPlayback programming
Loading, preloading, and displaying a video
The starting place for loading a video programmatically is usually the same; simply set the URL of the FLV file in the component's parameters. The ActionScript 3 FLVPlayback component uses the source property to define the URL of the FLV video. You can use a handful of other properties to affect how the video loads and starts to play.
This section covers the following topics:
- Importing the fl.video package
- Loading a video file and setting its autoPlay property
- Handling preloading
- Adding a progress bar component
- Displaying an image overlay when the video is stopped at frame 1
See the "Getting started" section if you're wondering how to set up your file to work with these samples.
Importing the fl.video package
A package is a group of classes that provide functionality to the movie through ActionScript 3 programming. It is common practice to import packages at the start of a script so that the script has direct access to the class names within the package.
To start a script by importing the video package, add the following code to a keyframe on the Timeline containing your component instance:
import fl.video.*;
Note: Using the asterisk causes the compiler to import all classes within that package. Think of the asterisk as a wildcard character that will, in this case, import all the packages within the video package. If you do not wish to import all of the classes within a package, you can import a specific class path, such as fl.video.FLVPlayback.
Loading a video and setting the autoPlay property
Loading a video can be as simple as setting the source property of the component to the URL of the FLV file. Setting the autoPlay property at the same time can be a convenient way of controlling how the video behaves once loaded; setting autoPlay to false stops the video from starting when it's ready to appear.
To load a video and set its autoPlay property to false, add the following code below the import code you just wrote:
// Load the FLV and stop it until it is started later
display.autoPlay = false;
display.source = "myMovie.flv";
This code assumes that there is an FLVPlayback instance on the Stage named display.
Note: The FLVPlayback source property requires an HTTP URL to an FLV file, an RTMP URL to a stream, or an HTTP URL to an XML file.
Handling preloading
The FLVPlayback component pauses display of the progressive video until it is ready for viewing. The general process for handling preloading involves one of two approaches; you either let the video start playing automatically once its ready event has fired, or you pause the video and wait till a greater amount has loaded. One of the keys to smooth video playback is the ability to listen to timing events broadcast from the FLVPlayback component.
To respond to the video's ready event, add the following code to the same keyframe containing your ActionScript:
function readyHandler(event:VideoEvent):void
{
// Pause until the video can play till the end
display.pause();
display.playWhenEnoughDownloaded();
}
display.addEventListener(VideoEvent.READY, readyHandler);
Note: This code pauses the movie during the ready event unless the movie has downloaded enough to play all the way through without interruption.
Adding a progress bar component
When using progressive video, you can display a progress bar while the video is loading, up until the point when the video can begin playing. This can be accomplished easily by using the ProgressBar UI component. Follow the steps below to create a working example.
To add a progress bar:
- Create a new ActionScript 3 FLA file and rename the default layer 1 to assets.
- Drag and instance of the FLVPlayback component from the Components panel to the Stage. Position and resize the component as desired.
- Name the instance display in the Property inspector.
- Drag a ProgressBar component from the Components panel to the Stage. Position and resize the progress bar as desired.
- Name the progress bar instance pb in the Property inspector.
- Create a new layer and name it actions.
- Select the keyframe on Frame 1 of the actions layer and open the Actions panel. Enter the following code in the text editor:
import fl.video.*;
import fl.controls.ProgressBarMode;
// Set Variables
var flvControl:FLVPlayback = display;
var flvSource:String = "Call_to_Action.flv";
// Create event handler functions to control the progressbar
function progressHandler(event:VideoProgressEvent):void
{
var bl:Number = Math.round(event.bytesLoaded/1000);
var bt:Number = Math.round(event.bytesTotal/1000);
// Update progress...
pb.setProgress(bl,bt);
}
function readyHandler(event:VideoEvent):void
{
// Remove progressbar when we start playing (optional)...
// removeChild(pb); // Remove the comments on this line if desired
}
// Set progress bar state
pb.mode = ProgressBarMode.MANUAL;
pb.indeterminate = false;
// Add listeners and load the video
flvControl.addEventListener(VideoProgressEvent.PROGRESS, progressHandler);
flvControl.addEventListener(VideoEvent.READY, readyHandler);
flvControl.source = flvSource; - Update the flvSource variable to match the URL of your FLV file.
- Export the SWF (Control+Enter) to see the results.
Another variation for using the progress bar would involve stopping the video from automatically playing and monitor the bytesLoaded vs. bytesTotal values in the progress handler function. You could then remove the progress bar and play the video based on a return of a specified percentage of bytes loaded.
Note: ActionScript 3 reports runtime errors from the FLVPlayback components as exceptions. You catch and handle exceptions using the try...catch statement in ActionScript. For more information on video exceptions, see the VideoError class section of the Flash CS4 Professional ActionScript 3.0 Language Reference.
To see a working example, see flvplayback_programming1.fla in the sample files.
Displaying an image overlay when the video is stopped on frame 1
It's not uncommon for a video to start on a black frame and then fade in. On the web, this can be a visual issue if the video is paused until the user clicks the play button. In this case, the paused first frame of the video doesn't give any visual information about the video's content. One way to get around this is to load a default, static image that's the same size as the video. The image remains visible if the video is paused on frame 1 and is invisible otherwise.
Note: This sample requires that you have an image available in the assets folder sized to the same dimensions as the video. Another option is to supply a path to an image elsewhere on a remote server.
To display a static image overlay above the FLVPlayback:
- Create a new ActionScript 3 FLA file and rename the default layer 1 as assets.
- Drag an instance of the FLVPlayback component from the Components panel to the Stage. Position and resize the component as needed (the size should match the size of your video and image).
- Name the instance display in the Property inspector.
- Create a new layer and name it actions.
- Select the keyframe on Frame 1 of the actions layer and open the Actions panel. Enter the following code in the text editor:
import fl.video.*;
import flash.display.*;
import flash.events.Event;
import flash.net.URLRequest;
// Set Variables
var flvControl:FLVPlayback = display;
var flvSource:String = "Call_to_Action.flv";
// Load image...
var defaultImage:Bitmap;
var defaultImagePath:String = "frame1.jpg";
var defaultImageLoader:Loader = new Loader();
defaultImageLoader.load(new URLRequest(defaultImagePath));
// Determine when to show the image...
function enterFrameHandler(event:Event):void
{
// If the video is stopped on frame 1, show the image
defaultImage.visible = display.playheadTime < 0.2;
}
// Handle image positioning when loaded...
function defaultImageHandler(event:Event):void
{
// Position with video...
defaultImage = event.currentTarget.content as Bitmap;
defaultImage.x = display.x;
defaultImage.y = display.y;
addChild(defaultImage);
// Monitor the video
addEventListener(Event.ENTER_FRAME, enterFrameHandler);
}
defaultImageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, defaultImageHandler);
// Load the video...
flvControl.autoPlay = false;
flvControl.autoRewind = true;
flvControl.scaleMode = VideoScaleMode.NO_SCALE;
flvControl.source = flvSource; - Update the
flvSourceanddefaultImagePathvariables to match the URLs of your asset files. - Export the SWF (Control+Enter) to see the results.
To see a working example, see flvplayback_programming2.fla in the sample files.
沒有留言:
張貼留言