Accessibility

Table of Contents

Adding video to a web page

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.

Selecting an output format

After adding a video file to the queue, you then select an output format. Adobe Media Encoder allows you to output video in these formats (see Figure 1):

  • Adobe FLV | F4V for use with Adobe Flash Player
  • H.264 for use with Apple iPod, 3GPP mobile phones, Sony PSP, and other devices

Output formats

Figure 1. Selecting an output format

If you've installed Adobe Premiere Pro, you'll also see additional options, including:

  • H.264 Blu-ray
  • MPEG-1 for use in CD-ROM authoring (Windows only)
  • MPEG-2 for use in DVD authoring (Windows only)
  • Windows Media (Windows only)
  • Apple QuickTime (Windows users must have QuickTime Player installed to encode videos in the QuickTime format.)

Follow these steps to select an output format suitable for use with Flash Player:

  1. Click the button in the Format column.
  2. Select FLV | F4V.

Adobe Media Encoder offers a number of predefined configurations known as presets that include multiple settings in frequently used combinations. Follow these steps to select a preset:

  1. Click the button in the Preset column.
  2. Select FLV – Web Medium (Flash 8 and Higher), as shown in Figure 2.

    presets

    Figure 2. Selecting a preset

When you select the Web Medium preset, the resulting video defaults to 360 pixels wide x 264 pixels high. Other default sizes include:

  • Web Large (640 pixels × 480 pixels)
  • Web Small (328 pixels × 240 pixels)
  • Web Modem (164 pixels × 120 pixels)

Using custom export settings

After selecting a preset, you can customize your settings. Follow these steps to open the Export Settings dialog box:

  1. Click in the encoding queue to select the AtTheWaterPark.avi file.
  2. Choose Edit > Export Settings.

    When the Export Settings dialog box appears, it might only display the currently selected Preset, the Output Name, and a summary of currently selected options. If those are the only options you see, you need to expand the available settings.

  3. Click the Advanced Mode button (see Figure 3).

    Advanced Mode button

    Figure 3. Clicking the Advanced Mode button reveals custom encoding options

The Export Settings dialog box has five tabs in advanced mode:

  • Filters
  • Format
  • Video
  • Audio
  • Others

In this article, I describe settings that have critical effects on both the size of the resulting video file, and on which version of Flash Player is needed to view it. For detailed descriptions of all available custom settings, see the Adobe Media Encoder online Help.

Selecting an output format

In the Format tab, shown in Figure 4, you set the Multiplexing option to either FLV or F4V. (Multiplexing means that the encoding process integrates video and audio channels into a single stream.)

mutliplexing options

Figure 4. Selecting a Multiplexing option

Depending on your selection of codec (explained in the next section), an FLV file requires either Flash Player 7 or later, or Flash Player 8 or later. An F4V file, which is an H.264 video for Flash Player, requires Flash Player 9,0,115 or later.

To decide which versions of Flash Player your video requires, it's helpful to know the approximate penetration (the percentage of computer users who have installed a particular version or later) of different Flash Player versions. For more information, see Flash Player Version Penetration on the Adobe website.

For example, as of September 2008 (the most recent survey at the time this article was written), approximately 90% of computer users in the United States and Canada had installed Flash Player 9,0,115 or later and were, therefore, able to view F4V files without having to install additional software. In contrast, over 99% of users had installed Flash Player 7 or later, and over 98% had installed Flash Player 8 or later. In this tutorial, you'll create video requiring Flash Player 8 or later to reach a larger audience than is available with the newer video standard.

Follow these steps to review the format setting:

  1. Click the Format tab.
  2. Verify that Multiplexing is set to FLV.

Setting video options

The Video tab includes options that affect the size and performance of the resulting video file. You first select a codec, as shown in Figure 5.

mutliplexing options

Figure 5. Selecting a video codec

A codec is a software application that encodes and decodes a video file. Adobe Media Encoder includes the following codecs for creating FLV files:

  • Sorenson Spark creates FLV files that have lower quality and larger file size, but can be viewed with Flash Player 7.
  • On2 VP6 creates FLV files that can be viewed with Flash Player 8 and later. These files have a higher quality and smaller file size. FLV files created with this codec also support alpha channels for composite video, such as videos that are shot with a green screen or other neutral background, and delivered with background transparency.

Note: When you select the F4V format, Adobe Media Encoder uses the MainConcept H.264 Video codec.

Follow these steps to select a video codec:

  1. Click the Video tab.
  2. Select On2 VP6.

The video's display size has a direct effect on the resulting file size: a smaller display size requires a smaller video file, and a larger display size requires a larger video file. You can customize the display size, but you should always constrain the height and width to make sure the video's aspect ratio (ratio of width to height) doesn't change.

The video's bitrate also has an effect on quality and file size. A higher bitrate results in higher quality and a larger file.

Follow these steps to customize the video size and bitrate:

  1. Select Resize Video.
  2. Select Constrain Width/Height (see Figure 5).
  3. Click the underlined number next to Frame Width [Pixels] and change it to 400, and then press the Tab key. You should see that Frame Height [pixels] changes automatically to 293.
  4. Scroll down to the Bitrate Settings section. Note that the Bitrate is set to a default of 600, and the estimated file size (displayed in the control bar near the Cancel and OK buttons) is 1 MB.

Setting audio options

The Audio tab, shown in Figure 6, allows you to select an audio codec and set its associated options.

audio options

Figure 6. Setting audio options

FLV files created with Sorenson Spark or On2 VP6 always use the MPEG Layer 3 (MP3) audio codec. These audio encoding options are available for the MP3 codec:

  • Output Channels can be set to Mono or Stereo. If your audio uses a single channel (for example, if it was recorded with a single microphone), selecting Mono can reduce the file size. If your audio was recorded in stereo, retain that setting to deliver a good audio experience.
  • Bitrate determines the quality of the audio. As with video bitrate, a higher audio bitrate results in a larger file and better quality. If your audio is made up of human voices or other nonmusical sounds, you might be able to reduce the bitrate (for example, to 48 kbps) without significantly losing audio quality; if it includes high-quality music, use a higher bitrate.

Follow these steps to check your audio settings:

  1. Click the Audio tab.
  2. Check that Output Channels is set to Stereo.
  3. Check that Bitrate [kbps] is set to 96.
  4. Click OK to close the Export Settings dialog box.

Creating the video file

After setting your video output configurations, follow these steps to select the location and name of the resulting video file in the list of video files:

  1. Click the name of the file in the Output File column.
  2. Make sure that AtTheWaterPark.flv is listed in the Save As text box, and that the Video folder for the sample website is listed in the Location text box.
  3. Click Save.
  4. Click Start Queue to create the new video file.

The amount of time required to create the file depends on the video's display size and other settings. Your computer's processing speed and other resources also have an effect on how long it takes to complete the encoding task.

The Status column shows the current status of each video in the queue. It displays "Encoding" when the video is being encoded, and a check mark when the process is complete (see Figure 7).

encoding job

Figure 7. A completed encoding job

After the encoding is complete, you can select the encoding job and click Duplicate to revise and reuse your settings, or click Remove if you're done with that video.

Follow these steps to remove the encoding job from the queue:

  1. Select the AtTheWaterPark.avi file in the queue.
  2. Click Remove to remove the job from the queue.
  3. Click Yes in the dialog box that appears to confirm you want to remove the video from the queue.
  4. Close Adobe Media Encoder.

Previewing the video in Adobe Media Player

You can preview the resulting video file with the free Adobe Media Player. Adobe Media Player is installed with all editions of Creative Suite 4, and can also be downloaded and installed separately from the Adobe website.

Adobe Media Player can play many video formats, including FLV files. The application is associated with the .flv file extension during installation, so FLV files should open automatically when you double-click or otherwise try to open them.

Follow these steps to open and preview the video file you created:

  1. Open Windows Explorer (Windows) or the Finder (Mac OS X).
  2. Navigate to the Video folder under the sample website root folder and locate the AtTheWaterPark.flv file.
  3. Double-click the file to open it.

    The video should open in Adobe Media Player and start to play automatically (see Figure 8).

    Adobe Media Player

    Figure 8. Adobe Media Player

  4. Close Adobe Media Player.