Embedding Flash Video into a Web Page

In this exercise, you insert an FLV file with a controller into a supplied web page in several easy steps.

You have two options when you insert and display an FLV file in your HTML documents using the Flash Video component:

• Progressive Download Video: If you choose this video type, the video is downloaded to the user’s hard drive, but starts playing the video before it finishes downloading. The video is downloaded from beginning to end, unless the user closes the connection before the download is complete. The user must have Flash Player 6 r65 (or greater) installed to see videos encoded with Sorensen Spark (included with Flash MX Professional 2004 and its standalone encoder). The user must have Flash Player 8 installed to see videos encoded with the On2 codec. For more information on which versions of Flash Player work with the different video codecs, search “on2 VP6 video codec”(with quotes) in Macromedia Flash 8 Help (F1).

  Note: The FLV video included with the article source files uses the Sorenson Spark codec, and can be viewed with Flash Player 6 r65 or greater.

• Streaming Video: If you choose this option, the video starts playing after a short buffer period, when a small amount of data downloads to the computer to ensure smooth playback. You must have Macromedia Flash Media Server available if you select this option. The user must have Flash Player 6 (or greater) installed to see your video, assuming it uses the Sorenson Spark codec.

Depending on which video type you select in the pop-up menu the following steps will vary slightly. For this tutorial you use the Progressive Download Video option to display your video files.

1. Launch Dreamweaver 8. Choose File > Open from the main menu and select the video01.html file within the chickens folder.
2. In either Design view or Split view, position your cursor within the editable content region and delete any existing text, such as “[insert video here] .”
3. Select Insert > Media > Flash Video from the main menu to launch the Flash Video Component.

4. Select Progressive Download Video from the Select video type pop-up menu, and the appearance of the Flash Video dialog box changes to show the following options for this format:

• URL: Specifies the URL of the FLV file to embed in your HTML document.
• Skin: Specifies the URL of the skin to load.
• Width: Specifies the width of FLV display.
• Height: Specifies the height of FLV display.
• Constrain: Maintains the aspect ration of the video if the width or height text boxes change the corresponding value.
• Detect Size: Detects the dimensions of the FLV file and automatically populates the Width and Height text boxes.
• Auto play: Specifies whether you play the video when the web page opens.
• Auto rewind: Specifies whether the playback control returns to the starting position after the video finishes playing.
• Prompt users to download Flash Player if necessary: When selected, this option embeds the required JavaScript code to detect users’ Flash Player version and prompts them to download a newer version, if necessary. If this option is not selected, the Message text box is disabled.
• Message: A message displays if a user’s current Flash Player version isn’t high enough to view the Flash content.



Figure 3. Specify your options in the Flash Video dialog box.

5. Click the Browse button next to the URL text box. Navigate to the farmsite directory on your hard drive, select chicken01.flv from the videos folder, and click OK.

6. Select a skin from the Skin pop-up menu. For this exercise, select Clear Skin 3. The area below the Skin pop-up menu shows you a small preview of the specified skin’s controller. Click the Detect Size button so Dreamweaver calculates the width and height of the current FLV file automatically, and then populates the text boxes with the correct dimensions of the video.

   

   Figure 4. This video controller uses the Clear Skin 3 skin.

7. Select the Auto play check box if you want the video to play automatically after the page loads. You need to ensure the Auto rewind check box is enabled if you want the video to return to the first frame after it completes.

8. Click OK to apply your settings, and Dreamweaver generates and inserts code that you need to embed the selected video into this web page. Embedding an FLV file and a player adds 8 lines of HTML code (provided that the Prompt users to download Flash Player if necessary check box was not selected), which configures the Flash Video component based on your selections.

   Based on the settings that you chose for this exercise, Dreamweaver inserts the following code into your document:

   <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
     codebase="http://download.macromedia.com/pub/shockwave/
     cabs/flash/swflash.cab#version=7,0,0,0" width="320" 
     height="240" id="FLVPlayer"> 
     <param name="movie" value="FLVPlayer_Progressive.swf" />
      <param name="salign" value="lt" />
      <param name="quality" value="high" />
      <param name="scale" value="noscale" />
      <param name="FlashVars" 
       value="&MM_ComponentVersion=1&skinName=Clear_Skin_3&streamName
       =../videos/chicken01&autoPlay=false&autoRewind=false" />
      <embed src="FLVPlayer_Progressive.swf" 
      flashvars="&MM_ComponentVersion=1&skinName=Clear_Skin_3&streamName
      =../videos/chicken01&autoPlay=false&autoRewind=false" 
      quality="high" scale="noscale" width="320" height="240" 
      name="FLVPlayer" salign="LT" type="application/x-shockwave-flash" 
      pluginspage="http://www.macromedia.com/go/getflashplayer" />
    </object> 

   The parameters you specify in the wizard are inserted into the previous HTML snippet, and pass information to Flash using FlashVars. The skin Clear_Skin_3 is copied to the same folder as the current HTML file, although it omits the file extension (.swf) in the HTML code. The second parameter, streamName, points to the FLV file you defined in the URL text box. It is a relative path and again omits the FLV file extension (.flv).

   The next two parameters are Boolean (true/false) values, which are based on your selections in the wizard. If you want to modify the skin or path to the FLV file, then you can modify these values directly using Code view in Dreamweaver. You might need to edit the width and height parameters manually in both the param and embed tags. These values represent the width and height of the FLV document; however, if you use certain default or custom skins, then you might need to modify these values if your skin contains a border and is larger than the dimensions of the FLV file.

   You will also notice that the values are repeated twice. Due to cross-browser issues, you need to define the FlashVars values in both a param tag as well as the embed tag so that the code works with Internet Explorer– and Netscape-based browsers

   Note: The actual SWF file that you need to drive the Flash Video component is a mere 10–12K, depending on whether you select the progressive download or streaming option. Using one of the default skins adds approximately another 4–11K, depending on the skin that you choose.