Accessibility
David Gassner

David Gassner

www.bardotech.com

Table of Contents

Created:
16 February 2009
User Level:
Beginner
Products:
Dreamweaver
Flash

Adding video to a web page

This tutorial teaches you how to publish videos on web pages in FLV format. You'll use Adobe Media Encoder, Adobe Dreamweaver CS4, and Adobe Flash CS4 Professional to complete the tutorial.

Videos you create with your video camera (or receive from family, friends, or colleagues) initially are in a format that is determined by the camera or by a video editing software application such as Adobe Premiere Pro CS4. These original video files aren't designed for delivery over the Internet. They're usually very large, because they're designed for delivery on a DVD or other medium. To be delivered successfully over the Internet, these files must be converted to a format that your website visitors can easily download and view. Flash and Dreamweaver have all the tools needed to accomplish this task, and nearly all Internet users have Flash Player, the software they'll need to view your videos.

In this tutorial you learn how to accomplish the following two critical tasks in creating and posting a video on a website:

  • You'll use Adobe Media Encoder to convert your original video to an FLV file, a compressed format that's suitable for delivery over the web.
  • You'll then use Dreamweaver to add the resulting video file to a web page.

In an optional step, you'll use Flash to create a more advanced video presentation. You'll add a title screen, and then create a cross-fade between the title screen and the video. Finally, you'll publish the Flash presentation with an advanced HTML page that supports full-screen video display, and integrate the result into an existing web page in Dreamweaver.

Requirements

To complete the tasks demonstrated in this tutorial, you need the following software and files:

Dreamweaver CS4

Flash CS4 Professional

Sample files:

Prerequisite knowledge

This tutorial is designed for users who have some experience with managing websites in Dreamweaver, including creating a new site and configuring it to upload files to a production web server. For more information on these tasks, see Working with Dreamweaver sites.

You do not need any experience with Flash or Adobe Media Encoder. The tutorial uses a sample video file that was created in Adobe Premiere Pro CS4, but it does not require any use or knowledge of this product.

Installing the sample files

Before you start the tutorial, download and extract the contents of homewebsite.zip anywhere on your hard disk. This archive file contains a folder named that contains these assets:

  • Starter website files, including two web pages whose designs have space for video display.
  • A sample AVI video file named AtTheWaterPark.avi that you'll convert for use on a website.

About the author

David Gassner is an Adobe Certified Instructor and co-owner of Bardo Technical Services, an Adobe Authorized Training Center in Seattle. He is an Adobe Certified Expert and Instructor with certifications in Dreamweaver, ColdFusion, and Flex. David wrote Flex 3 Bible for Wiley and has authored video-based training titles on Dreamweaver, ColdFusion, and Flex for Lynda.com.