Dreamweaver

Insert Flash Video

You can easily insert Flash Video content in your web pages without using the Flash authoring tool. You must have an encoded Flash Video (FLV) file before you begin.

Dreamweaver inserts the Flash Video component; when viewed in a browser, this component displays the Flash Video content you select, as well as a set of playback controls.

Flash Video component displayed with playback controls.

Dreamweaver gives you the following options for delivering Flash Video to your site visitors:

Progressive Download Video
Downloads the Flash Video (FLV) file to the site visitor’s hard disk and then plays it. Unlike traditional “download and play” methods of video delivery, however, progressive download allows the video file to start playing before the download is complete.

Streaming Video
Streams the Flash Video content and plays it on a web page after a short buffer period that ensures smooth playback. To enable streaming video on your web pages, you must have access to Adobe® Flash® Media Server.

You must have an encoded Flash Video (FLV) file before you can use it in Dreamweaver. You can insert video files created with two kinds of codecs (compression/decompression technologies): Sorenson Squeeze and On2.

  • If you created your video with the Sorenson Squeeze codec, site visitors will need Flash® Player 7 from Adobe or later to play progressive download video; they will need Flash Player 6.0.79 or later to play streaming video.

  • If you created your video with the On2 codec, site visitors will need Flash Player 8 or later.

    After inserting a Flash Video file in a page, you can insert code in the page to detect whether the user has the correct version of Flash Player to view the Flash Video. If they don’t have the correct version, they will be prompted to download the latest version of Flash Player.

    For more information about Flash Video, visit the Flash Video Developer Center at www.adobe.com/go/flv_devcenter.

Insert a Flash Video

  1. Select Insert > Media > Flash Video.
  2. In the Insert Flash Video dialog box, select Progressive Download or Streaming Video from the Video Type pop‑up menu.
  3. Complete the rest of the dialog box options and click OK.

Set options for progressive download video

The Insert Flash Video dialog box lets you set options for progressive download delivery of a Flash Video (FLV) file inserted in a web page.

  1. Select Insert > Media > Flash Video (or click the Flash Video icon in the Common insert bar).
  2. In the Insert Flash Video dialog box, select Progressive Download Video from the Video Type menu.
  3. Specify the following options:
    URL
    Specifies a relative or absolute path to the FLV file. To specify a relative path (for example, mypath/myvideo.flv), click the Browse button, navigate to the FLV file, and select it. To specify an absolute path, type the URL (for example, http://www.example.com/myvideo.flv) of the FLV file.
    Note: For the video player to function correctly, the FLV file must contain metadata. FLV files created with Flash Communication Server 1.5.2, FLV Exporter version 1.2, and Sorenson Squeeze 4.0 automatically contain metadata.

    On the Macintosh, you must use an absolute path if you are pointing to FLV files in directories that are two or more levels up from the HTML file.

    Skin
    Specifies the appearance of the Flash Video component. A preview of the selected skin appears beneath the Skin pop‑up menu.

    Width
    Specifies the width of the FLV file, in pixels. To have Dreamweaver determine the exact width of the FLV file, click the Detect Size button. If Dreamweaver cannot determine the width, you must type a width value.

    Height
    Specifies the height of the FLV file, in pixels. To have Dreamweaver determine the exact height of the FLV file, click the Detect Size button. If Dreamweaver cannot determine the height, you must type a height value.
    Note: Total With Skin is the width and height of the FLV file plus the width and height of the selected skin.

    Constrain
    Maintains the same aspect ratio between the width and height of the Flash Video component. This option is selected by default.

    Auto Play
    Specifies whether to play the video when the web page is opened.

    Auto Rewind
    Specifies whether the playback control returns to starting position after the video finishes playing.

    Prompt Users To Download Flash Player If Necessary
    Inserts code in the page that detects the version of Flash Player required to view the Flash Video, and prompts the user to download the latest version of Flash Player if they don’t have the required version.

    Message
    Specifies the message that will be displayed if the user needs to download the latest version of Flash Player to view the Flash Video.

  4. Click OK to close the dialog box and add the Flash Video content to your web page.

    The Insert Flash Video command generates a video player SWF file and a skin SWF file that are used to display your Flash Video content on a web page. (To see the new files, you may need to click the Refresh button in the Files panel.) These files are stored in the same directory as the HTML file to which you’re adding Flash Video content. When you upload the HTML page containing Flash Video content, Dreamweaver uploads these files as dependent files (as long as you click Yes in the Put Dependent Files dialog box).

Set options for streaming video

The Insert Flash Video dialog box lets you set options for streaming video download of a Flash Video (FLV) file inserted in a web page.

  1. Select Insert > Media > Flash Video (or click the Flash Video icon in the Common insert bar).
  2. Select Streaming Video from the Video Type pop‑up menu.
    Server URI
    Specifies the server name, application name, and instance name in the form rtmp://www.example.com/app_name/instance_name.

    Stream Name
    Specifies the name of the FLV file that you want to play (for example, myvideo.flv). The .flv extension is optional.
    Note: For the video player to function correctly, the FLV file must contain metadata. FLV files created with Flash® Communication Server 1.5.2, FLV Exporter version 1.2, and Sorenson Squeeze 4.0 automatically contain metadata.

    Skin
    Specifies the appearance of the Flash Video component. A preview of the selected skin appears beneath the Skin pop‑up menu.

    Width
    Specifies the width of the FLV file, in pixels. To have Dreamweaver determine the exact width of the FLV file, click the Detect Size button. If Dreamweaver cannot determine the width, you must type a width value.

    Height
    Specifies the height of the FLV file, in pixels. To have Dreamweaver determine the exact height of the FLV file, click the Detect Size button. If Dreamweaver cannot determine the height, you must type a height value.
    Note: Total With Skin is the width and height of the FLV file plus the width and height of the selected skin.

    Constrain
    Maintains the same aspect ratio between the width and height of the Flash Video component. This option is selected by default.

    Live Video Feed
    Specifies whether the Flash Video content is live. If Live Video Feed is selected, Flash Player will play a live video feed streamed from Flash® Media Server. The name of the live video feed is the name specified in the Stream Name text box.
    Note: When you select Live Video Feed, only the volume control appears on the component’s skin, because you cannot manipulate live video. Additionally, the Auto Play and Auto Rewind options have no effect.

    Auto Play
    Specifies whether to play the video when the web page is opened.

    Auto Rewind
    Specifies whether the playback control returns to starting position after the video finishes playing.

    Buffer Time
    Specifies the time, in seconds, required for buffering before the video starts playing. The default buffer time is set to 0 so that the video starts playing instantly after the Play button is clicked. (If Auto Play is selected, the video starts playing as soon as a connection is made with the server.) You might want to set a buffer time if you are delivering video that has a higher bit rate than the site visitor’s connection speed, or when Internet traffic might cause bandwidth or connectivity problems. For example, if you want to send 15 seconds of video to the web page before the web page starts to play the video, set the buffer time to 15.

    Prompt Users to Download Flash Player if Necessary
    Inserts code in the page that detects the version of Flash Player required to view the Flash Video, and prompts the user to download the latest version of Flash Player if they don’t have the required version.

    Message
    Specifies the message that will be displayed if the user needs to download the latest version of Flash Player to view the Flash Video.

  3. Click OK to close the dialog box and add the Flash Video content to your web page.

    The Insert Flash Video command generates a video player SWF file and a skin SWF file that are used to display your Flash Video on a web page. The command also generates a main.asc file that you must upload to your Flash Media Server. (To see the new files, you may need to click the Refresh button in the Files panel.) These files are stored in the same directory as the HTML file to which you’re adding Flash Video content. When you upload the HTML page containing Flash Video content, don’t forget to upload the SWF files to your web server, and the main.asc file to your Flash Media Server.

    Note: If you already have a main.asc file on your server, check with your server administrator before uploading the main.asc file generated by the Insert Flash Video command.

    You can easily upload all of the required media files by selecting the Flash Video component placeholder in the Dreamweaver Document window, and clicking the Upload Media button in the Property inspector (Window > Properties). To see a list of required files, click Show required files.

    Note: The Upload Media button does not upload the HTML file that contains the Flash Video content.