There are two tools at your disposal to add video to a web page: Adobe Dreamweaver and Adobe Flash CS4 Professional. Use Dreamweaver to add video quickly to a web page without having to use Flash. For more advanced capabilities, such as adding interactivity, selecting from a wider range of custom interfaces, layering video with other animation, and synchronizing the video with text and graphics, use Flash.

This section of the Video Learning Guide for Flash describes both processes for adding video to a web page.

Requirements

To follow along with this learning guide, you will need to install the following software:

Dreamweaver CS4

• Try
• Buy

Flash CS4 Professional

• Try
• Buy

Note: This learning guide covers video in Adobe Flash CS4 Professional, as well as other versions of Adobe Flash. Be sure to note that certain features, such as H.264 codec support, are available only in Adobe Flash Player 9.0.115 and later.

Getting started

Before you can add video to your pages, you must decide which delivery mechanism to use: progressive download or streaming.

Whenever you add video to a web page, you should also add a behavior to the page that detects which version of Flash Player the viewer has. In particular, you should check that any visitor trying to view the page has a version of Flash Player that lets them view the content you're providing. For details on an easy-to-use embed and detection method, see Detecting Flash Player versions and embedding SWF files with SWFObject 2. Also refer to this older article, Best practices for Flash Player detection.

Importing web video into Dreamweaver

The following procedure describes how to add a video to a web page within Dreamweaver. You must have an encoded FLV file before you begin.

To add video to a web page using Dreamweaver CS4:

1. Capture and/or encode an FLV file. For details, see Capturing and encoding video.
2. Select Insert > Media > Flash Video.
3. In the Insert Flash Video dialog box, select Progressive Download or Streaming Video from the Video Type pop-up menu.
4. Complete the rest of the dialog box options.

Note: To publish MPEG-4 video, you need to change the file extension to .flv so that Dreamweaver will recognize the video file. You also need to manually enter the video's width and height in the Insert Flash Video dialog box.

You can select an option that inserts code that detects the Flash Player version required to view the web video and that prompts the user to download the latest version of Flash Player if they don't have the correct version.

For a tutorial on creating a project in Dreamweaver that includes web video, read Presenting video with the Flash video component in Dreamweaver CS3.

Authoring with Flash CS4 Professional

You can use Flash CS4 Professional to build a rich interface for playing your video in the browser.

The following procedure describes how to use components to author a video player. You can import a video file that is already deployed to a web server, or you can select a video file that is stored locally on your computer, and upload the video file to the server after importing it into your FLA file. For information on hand-coding your video controls using ActionScript, go to the Playing back external FLV files dynamically section of Learning ActionScript 2.0 in Adobe Flash.

To import video for progressive download:

1. To import the video clip into the current FLA file, select File > Import > Import video. The Import Video Wizard is displayed.

2. Select the video clip you want to import. You can select either a video clip stored on your local computer, or you can enter the URL of a video already uploaded to a web server.

   Note: If you're working in an Adobe Flash Lite FLA file, you can import mobile device video bundled in a SWF file through the wizard.

3. If the video you are deploying is not in FLV or F4V format, the Import Video Wizard displays a message stating that you should launch Adobe Media Encoder. If needed, click Launch Adobe Media Encoder, edit and encode the video as desired, and then return to the Video Import Wizard, where you can click Browse again to locate the new compressed video. For information on encoding your video using the Import Video Wizard, see the Encode media section of the Using Adobe Media Encoder CS4 online documentation.
4. After selecting your FLV or F4V file, click the Next button.

5. Under the Skinning section, select a skin for your video clip. You can choose to do the following:

   • Not use a skin with the video.
   • Select one of the predefined skins.
   • Select a custom skin of your own design by entering the URL of the skin on the server. For more information, read Skinning the ActionScript 3 FLVPlayback component or the Creating a new skin section of the Using ActionScript 3.0 Components online documentation.
6. Click Next and then Finish to complete the process. The Video Import Wizard will create a video component on the Stage configured so you can test the video playback locally by exporting the SWF file (Control > Test Movie).

7. Upload the following assets to the web server hosting your video:

   • The FLV encoded video clip (which is located in the same folder as the source video clip you selected with an .flv or .f4v extension).

     Note: If the video clip is in FLV format, Flash uses a relative path to point to the FLV file (relative to the SWF), letting you use the same directory structure locally that you use on the server.

   • The video skin SWF file (if you chose to use a skin). If you choose to use a predefined skin, Flash copies the skin SWF file into the same folder as the FLA file.
   • The SWF file containing the video component.
   • The HTML file that embeds the SWF and displays it in a browser.

You must edit the component's source field (or contentPath field in the ActionScript 2 FLVPlayback component) to that of the web server to which you are uploading the video using the Component Inspector panel. For more information, see the FLVPlayback component parameters section of the Using ActionScript 3.0 Components online documentation.

To import video for streaming with the Flash Video Streaming Service:

You can import a video file that is already deployed to a Flash Media Server or FVSS, or you can select a video file that is stored locally on your computer, and upload the video file to the server after importing it into your FLA file:

1. To import the video clip into the current Flash document, select File > Import > Import Video. The Import Video Wizard is displayed.
2. Select the video clip you want to import. You can select either a video clip stored on you local computer, or you can enter the URL of a video already uploaded to your own Flash Media Server or a Flash Video Streaming Service (FVSS).

3. If the video you are deploying is not in FLV format, you can launch Adobe Media Encoder to select an encoding profile, and crop, trim and split the video clip.

   Note: This step only applies if you are uploading the video from your local computer. Video clips that are already deployed to a server must have previously been encoded in the FLV format, or a compatible MPEG-4 format.

4. Select a skin for your video clip. You can choose to do the following:

   • Not use a skin with the video.
   • Select one of the predefined skins.
   • Select a custom skin of your own design by entering the URL of the skin SWF file on the server.

   The Video Import Wizard will create a video component on the Stage that you can use to test video playback locally.

5. Publish the file and upload the following assets to the Flash Media Server or FVSS hosting your video:

   • The FLV encoded video clip (which is located in the same folder as the source video clip you selected with a .flv extension).

     Note: If the video you are working with has previously been deployed to Flash Media Server or the FVSS hosting your video, you can skip this step.

   • The video skin SWF file (if you chose to use a skin). If you choose to use a predefined skin, Flash copies the skin into the same folder as the FLA file.
   • The SWF file containing the video component. You must change the FLVPlayback component source field to specify the web server to which you are uploading the video.

Where to go from here

For a tutorial on creating a project in Dreamweaver that includes video on the web, read Presenting video with the Flash video component in Dreamweaver. Also be sure to check out other sections in the Video Learning Guide for Flash.

About the author