Encode Flash video and drop into Dreamweaver

by Craig Petrou and Jasmine Bucher

Just as The Buggles so famously said, “Video killed the radio star,” so too can it be said that web-based video has killed the static web page. Gone are the days of catching the attention of the overstimulated consumer with well-placed hypertext links, stimulating content, and cool graphics. From presidential candidates and college admission offices to Wall Street investors and the creators of the phenomenally popular YouTube, everyone is doing it. And if peer pressure works like it has since long before the short career of The Buggles (1977–1981), then web-based video is here to stay and will only continue to increase for entertainment, communication, and content delivery.

Web developers have struggled to find the best way to disseminate video on their sites. They’ve shared the same horrid experience of a client delivering a 45-minute, double-digit megabyte file with orders to just post it. What consumer has the patience to wait for such a large file to download? And what developer doesn’t find this a waste of time?

But the integration of web-based video has come a long way. And with the inclusion of the Flash® Video 8 Encoder and its seamless amalgamation with Dreamweaver®, even web developers with minimal video background can successfully include web-based video on their sites. Video file formats such as AVI, MOV, MP4, MPG, and WMV can all be converted to FLV files, which are viewable on most operating systems and web browsers via Flash Player 6 or later.

The following tutorial explains how to take a video file, convert it to FLV, and embed it in a web page using Dreamweaver 8.

Converting video files to FLV

Captivate demo: Convert video to FLV and embed within Dreamweaver

1. Launch Flash 8 Video Encoder, which came with Studio 8.
2. Click Add, navigate to the video file you want to convert, and click Open.
3. Select the video file, and click Settings.
4. Select one of the Flash Video encoding profiles from the pull-down menu. (For detailed information about FLV encoding profiles, visit the Flash Developer Center)
5. Enter an output filename.
6. Click Show Advanced Settings if you want to adjust the encoding profile you selected. You can adjust the video and audio encoding and cue points, and you can also crop and trim the video size. Finally, set the in and out points for encoding the video by dragging the scrubber sliders. After making adjustments to the encoding profile, click OK.
7. Click Start Queue to begin encoding the video. While the video is encoding, you can watch the progress of elapsed time and time left until completion. A green checkmark will appear to indicate the video encoding is complete.
8. Exit the encoder if you do not have any additional videos to convert.

Embedding FLV in Dreamweaver 8

1. Launch Dreamweaver 8.
2. Create a new HTML web page by choosing File > New.
3. Select Basic Page and then HTML, and click Create.
4. Click Design View in the toolbar.
5. Choose Insert > Media > Flash Video.
6. You will be prompted to save the FLV object before inserting it. Click OK.
7. Name and save the new HTML Web page within your website.
8. The Insert Flash Video dialog box will appear. Select one of the video types from the pull-down menu. (Progressive download should be used for web sites with low traffic. For sites with high traffic or those offering a high-end video experience, consider using streaming video.)
9. Click Browse to locate and select the new FLV file you just encoded, and click OK.
10. Click Detect Size to get the width and height of your encoded video. Use the width to help determine the prebuilt FLV player skin that works best from the pull-down menu.
11. Select Auto Play, located below the width and height settings, to have the video play as soon as it loads within your finished web page. Select Auto Rewind to make the video rewind as soon as it finishes playing.
12. Click OK to finish inserting the FLV file within your web page.
13. Choose File > Preview in Browser to view the new video-embedded web page. You will be prompted to save the file. Click Save. This will open your chosen web browser and show you a preview of the new web page with your FLV file.
14. From the local files window (Dreamweaver FTP panel), upload your new HTML file. Dreamweaver will prompt you to include dependent files (say yes). If Dreamweaver does not prompt you to include dependent files, make sure to upload the FLV file, the pre-built FLV player skin file (SWF), the FLV Player file (FLVPlayer_Progressive.swf), and the Active Content javascript file (AC_RunActiveContent.js).

So, is it really that easy to take a video file, convert it to FLV, and embed it in a web page using Dreamweaver 8? Yes and no. There is plenty of web-based video out there. Some is effective; some is not. Some is good quality; and some is not. Just as the laser printer made everyone a graphic designer, so too has the easy incorporation of web-based video made everyone a producer. But one thing is certain, web-based video is here to stay. And as The Buggles said, “We can’t rewind, we’ve come so far.” So, with this easy process, why not experiment?