Accessibility

Table of Contents

  1. Introduction
  2. Getting started
  3. Loading, preloading, and
    displaying a video
  4. Playing, pausing, and
    stopping a video
  5. Seeking to a location in a video
  6. Handling full-screen mode and
    layout controls
  7. Creating a video playlist
    (playing multiple videos)

Controlling web video with ActionScript 3 FLVPlayback programming

Getting started

This section provides a quick overview of what you'll need to know to begin customizing video playback with ActionScript 3. If you have previous experience using ActionScript 3 and working with FLA video and the FLVPlayback component, then you may wish to skip ahead to the following pages of this article. Otherwise, it is important that you have a full understanding of the following information to ensure you have the foundation needed to programmatically modify the FLVPlayback successfully.

Before you start

You should be familiar with some of the following resources (beginning to intermediate) so that you understand encoding FLV and H.264 video and working with the FLVPlayback component:

To follow along with the instructions in this article, you will need to have an ActionScript 3 FLVPlayback component and an FLV or MPEG-4 file to use with the provided code examples.

Note: Video files encoded with the H.264 codec can be viewed using the ActionScript 3 FLVPlayback component if viewed in Flash Player 9,0,115 and later. H.264 video support includes a range of MPEG-4 formats: F4V, MP4, M4A, MOV, MP4V, 3GP, and 3G2.

Understanding the sample files

Download the provided sample files and uncompress the folder to see working code examples that control a short FLV file. Notice that each of the files is set up consistently with two layers on the main timeline: assets and actions. The assets layer holds the FLVPlayback component (named "display") and the actions layer contains the code. Use the sample files as a guide to compare with the files you create or use them as a foundation to begin building your own project.

Setting up your file to run the code samples

You'll need three things to get started; an FLV file, an FLVPlayback component instance, and an actions layer with a few lines of code. To use the code samples in this article, do the following:

  1. Create a folder on your desktop or select a location where you'd like to save your files. Save a copy of your own FLV file or the FLV file from the sample files folder into this location.
  2. Create an ActionScript 3 FLA file. Save the file next to the FLV file as described in the last step.
  3. Rename the default layer 1 to assets.

  4. Open the Components panel and drag an instance of the FLVPlayback component from the Video folder. Because you are working in an ActionScript 3 FLA file, the component available is the ActionScript 3 FLVPlayback component.

    Note: While it is possible to create and position the FLVPlayback component and other UI components programmatically, the components must first be copied from the Components panel to the Library of the current FLA file. For the purposes of this article, I go one step further and suggest that you start your file by dragging an FLVPlayback component to the Stage, naming its instance, and positioning it visually as desired.

  5. Place the component on the Stage and resize its dimensions as desired using the Free Transform tool.

  6. With the component selected, name the instance in the Property inspector.

    Note: The examples in article use the instance name display for the FLVPlayback instance. Either use this instance name or change the name in your code to match the instance name of your video component.

  7. Create a new layer and name it actions.
  8. Select the keyframe on Frame 1 of the actions layer and open the Actions panel (F9).
  9. Copy the code example from the article or the sample file and paste it into the text editor of the Actions panel.
  10. Update the flvControl variable to the video component instance name you used and update the flvSource variable with the URL of your FLV file.
  11. Export the SWF (Control > Enter) or publish the movie to see the results.

Understanding your working files

Once you've run through the previous steps, you'll have a handful of files to work with including the FLV file, possibly an HTML file, the master FLA file, the SWF file, and the skin SWF file (if a skin is used). You will upload all of these files, except the FLA file, to the server for the deployment of progressive video.

For full details on the ActionScript 3 FLVPlayback API, see the FLVPlayback class section of the Flash CS4 Professional ActionScript 3.0 Language Reference.

Page 2 of 7
Previous Page
Next Page