How To Install Progressive Video with Dreamweaver

IRT supports Flash (.flv) as the format of choice for posting video to your website. If you already have your .flv Flash Video file, then it's pretty easy to install it on a Web page using Dreamweaver. See the Convert/Encode Flash Video if you need help getting a video into .flv.

These directions are for progressive download. See the Video page for a comparison of progressive vs. streaming.

Step 1: Place your .flv Flash Video file within your site's local file structure and upload it to your site.

Step 2: Find or create a new page in which to embed the video.

Step 3: Place your cursor within the page, wherever you want the video to appear.

Step 4: Use the menu sequence: Insert > Media > Flash Video. You will see the following dialog box.

embed flash

Step 5: Choose Progressive under Video Type. Browse to and select your .flv file.

Step 6: Choose a Skin for the video player. Dreamweaver provides several options. We prefer the Clear Skin options. Note the minimum width requirements for the 3 variations on the controls.

Step 7: Set the desired Width and Height for the display. Typical sizes are 320 X 240, 240 X 180, and 160 X 120. But you can set the size to whatever you need for your purposes. Keep Constrain checked, unless you want to change the aspect ratio.

Step 8: The three bottom buttons offer options:

to have the video start automatically
to rewind automatically on completion and
to "Prompt users to download Flash Player if necessary." This sets up Dreamweaver's own simple plug-in detection script.
- We usually get a locked code error when we use this on one of our SoM Web formatted pages. See the workaround, below.
- Also, IRT uses a more comprehensive plug-in detection script.

Step 9: Click OK to embed the video.

Step 10: In addition to adding the embed code to your page, Dreamweaver will output 2 files: A FLVPlayer file and a Skin file (look for the .swf extension). If you selected Dreamweaver's plug-in detector, a JavaScript will also be added to the <head> tagset of your page. Put the page and all of these files to the server (you can click Yes when prompted for dependent files to accomplish this, or put the files separately).

Step 11: Be sure to test your page and video in a browser.

Demo: Here's a sample video page using this embed method, in a new window. View the page's Source to see the sample code.

Workaround for Locked Code insert error

The error "Making this change would require changing code that is locked by a template or translator. The change will be discarded." occurs when trying to install the player with Dreamweaver's plug-in detection script because Dreamweaver has trouble finding the editable area within the head code of the page.

Create a new, blank HTML page
Embed the video, player and skin as above, with the plug-in button selected
Copy the embed object from your blank page, and paste it where you want it on your formatted page
Copy the JavaScript for plug-in detection from the Head (Use the View menu > make sure Head Content is checked. You will see a script icon in the Head band that appears between the Code and Design panels). Find the "placeholder" comment that marks the editable area of the Head on your formatted document, and paste in the JavaScript.
Save and put your page, and test in a browser