23 November 2010
The ActionScript 3 FLVPlayback component lets you easily include a video player in your Adobe Flash Professional CS4 (or later) application. With the FLVPlayback component you can play progressively downloaded Adobe Flash Video files over HTTP or play streaming video files from Adobe's Flash Media Server or from Flash Video Streaming Service (FVSS).
Prior to Flash Player 9, the FLVPlayback component supported only video files in FLV format. Flash Player 9, Update 3 added support for high-definition MPEG-4 video formats that use standard H.264 encoding. These formats include MP4, M4A, MOV, MP4V, 3GP, and 3G2 as long as they use standard H.264 encoding. The FLVPlayback component does not, however, support protected MP4 file such as those downloaded from Apple iTunes or digitally encrypted by FairPlay.
Note: For more information about the FLVPlayback component and Flash Player 9 Update 3 (ver. 9,0,115,0), read Using the FLVPlayback component with Flash Player 9 Update 3.
Adobe released the FLVPlayback 2.5 component after Flash Professional CS4. The FLVPlayback 2.5 component is an update to the FLVPlayback component and is available for Flash Professional CS4 as a download on the Flash Media Server software tools page. Both the FLVPlayback and the FLVPlayback 2.5 components are included in Flash Professional CS5. The FLVPlayback 2.5 component increases the streaming performance and quality for video on demand (VOD) and live streaming and supports dynamic streaming and live digital video recording (DVR) functionality. Use the FLVPlayback 2.5 component the same way you would the FLVPlayback component.
Note: A project that includes instances of both the FLVPlayback and FLVPlayback 2.5 components uses the FLVPlayback 2.5 version of the component for all FLVPlayback component instances in the published SWF file. In other words, the FLVPlayback 2.5 component replaces instances of the FLVPlayback component in a project that includes both components when the project is published.
You can find the FLVPlayback and FLVPlayback 2.5 components in the Components panel (Window menu > Components) under the Video tree control. Below these components are several FLVPlayback Custom UI components, which provide individual buttons and control mechanisms that you can customize and use to play, stop, pause, and otherwise control a video.
The FLVPlayback components also include a set of prebuilt skins that incorporate playback controls. For more information on these skins, see the Applying skins and playback controls section of this article.
You can add the FLVPlayback component to your application in the following ways:
Note: When you add the FLVPlayback component to your application, if you do not set the
skin properties, the generated movie clip appears to be empty. For information on specifying a video file and applying a skin to FLVPlayback, beyond what is provided in the following procedures, see Specifying the video file to play and Applying skins and playback controls.
sourceparameter in the Properties panel or Component inspector and enter a string that specifies one of the following:
skinparameter Value cell to open the Select Skin dialog box.
In the first two cases, a preview of the skin appears in the viewing pane above the drop-down menu.
Note: Do not select the Embed Video option. The FLVPlayback component plays only external FLV files or streaming video. This option will not place an FLVPlayback component on the Stage.
import fl.video.*; var flvPlayer:FLVPlayback = new FLVPlayback(); addChild(flvPlayer); //The next line assumes you have copied the skin file to the directory //that contains the published SWF file. If you are testing the //application in Flash Professional, this is the same directory as the //FLA file, too. flvPlayer.skin = "./SkinUnderPlaySeekMute.swf" flvPlayer.source = "http://www.helpexamples.com/flash/video/water.flv";
Note: The skin SWF file needs to be in the same location as the published SWF file for your application. While testing your application in Flash Professional, this locations is the same folder as the FLA file. However, when you deploy/publish your files to their final location, you need to copy the skin SWF file to the same location as the published SWF file for your application—or else specify the location for the skin property relative to the deployed application files.
Skin SWF files are stored in the following locations:
To get the source files for this example, download one of the two ZIP files linked to at the top of this page, depending on which version of Flash Professional you are using. For the Flash Professional CS4 source file for this example, download FLVPlaybackExample_CS4.zip. For the Flash Professional CS5 source using the FLVPLayback 2.5 component for this example, download FLVPlaybackExample_CS5.zip.
You can specify the video file for the FLVPlayback component to play in the following ways:
sourceparameter in the Component inspector.
sourceparameter in the Component inspector to open the Content Path dialog box.
The Match source dimensions option specifies whether the FLVPlayback instance on the Stage should match the dimensions of the source video file. The source file contains preferred height and width dimensions for playing. If you select this option, the dimensions of the FLVPlayback instance are resized to match these preferred dimensions.
You can also specify the name and location of the video file using the ActionScript
FLVPlayback.source property or the
FLVPlayback.load() methods. The
source property and both of the methods take precedence over the
source parameter in the Component inspector because you set them at runtime. For more information, see
FLVPlayback.load() for the FLVPlayback class in the ActionScript 3 Language and Components Reference.
You can select a skin for the FLVPlayback component by clicking the Value cell for the
skin parameter in the Component inspector. Then click the magnifying glass icon to open the following Select Skin dialog box, in which you can select a skin or provide a URL that specifies the location of the skin SWF file.
Skins that are listed in the Skin drop-down menu are located in the Configuration folder of your Flash Professional installation (see Skin SWF file locations above). You can make new skins available to this dialog box by creating them and placing the SWF file in the folder. The skin name will appear in the drop-down menu with a .swf extension. When you publish the SWF file containing the FLVPlayback component, the skin files are automatically copied to the same folder as the SWF file.
You can also apply a skin to an FLVPlayback instance by setting the
skin property using ActionScript. For an example, see Use ActionScript to create an FLVPlayback instance dynamically.
preview parameter in the Component inspector lets you view a frame of the source video file on the Stage along with any changes that you make to the component's skin. Flash Professional CS5 enables live preview automatically. Clicking the
preview parameter opens the following dialog box, which plays the source file.
Click OK when the video reaches the scene that you would like to capture for previewing the component on the Stage. Displaying a frame of the file in the component on the Stage enables you to see it in relationship to other elements of the component and the application on the Stage.
Note: This has no effect on what you see when you run the published SWF. If you want to load a poster image of the video at runtime, use the Export button to export this image as a PNG file and write ActionScript to load it in at runtime. That exercise is beyond the scope of this article, however.
For more information about the FLVPlayback component, see the following resources:
If the FLVPlayback component does not meet your needs, and you prefer to create your own custom video player, read Handling metadata and cue points in Flash video for some useful tips.
Related Flash Quick Starts