How to add Video to a Website
Adding video to a web page: A Tutorial
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.
Here are our our newest, professional flash website templates.
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
* Try
* Buy
Flash CS4 Professional
* Try
* Buy
Sample files:
* home_website.zip (ZIP, 53 MB)
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:
Dreamweaver CS4
Flash CS4 Professional
Sample files:
- home_website.zip (ZIP, 53 MB)
* 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.
Creating an FLV file with Adobe Media Encoder
Adobe Media Encoder uses a process known as encoding to compress an original video file into a format that's suitable for delivery over the web. In this part of the tutorial you'll learn how to accomplish the following tasks:
* Open Adobe Media Encoder
* Select a video file that you want to encode for the web
* Configure and complete the encoding process to produce an FLV file for your website
Using Adobe Media Encoder
You can open Adobe Media Encoder from the Windows Start menu, or from the Applications folder on Mac OS X.
Note: You can also start Adobe Media Encoder from within certain Creative Suite applications, including Flash and Adobe Premiere Pro.
It takes time to encode video files. The amount of time required depends on the size of the video, the format you're encoding, and your computer's available resources. Adobe Media Encoder lets you add multiple original video files to an encoding queue, configure each of the encoding jobs individually, and then start the queue. The encoding jobs are then executed one at a time until they're all completed.
Follow these steps to add the original video file to the encoding queue:
1. Choose File > Add in Adobe Media Encoder.
2. Navigate to the sample website's Video folder.
3. Select the AtTheWaterPark.avi file.
Note: You can also drag video files from Windows Explorer (Windows) or the Finder (Mac OS X) into the queue.
The video file is added to the encoding queue.
View the tutorial in it's entirety here. Tutorial information from Adobe.com.
