Web Sites and Ezine Design and Hosting

Support Topics

Prepare Video for Web Delivery

Home Customer Support Web Sites Prepare Video

Preparing Video for Web Delivery

Providing a video for your site visitors is a three step process.

Create a video with compelling content,
Encode the video for web delivery, and
Deliver the encoded video from your site

Create a Video

We assume your video has already been produced, captured and edited for effective and enjoyable viewing. The video is stored in some appropriate digital video format, typically DV or AVI, on your hard drive, ready to be prepared for web delivery.

However, if your video was stored on a DVD and can be played in a DVD player, you must extract the video from your DVD before doing Video Encoding. Extraction software, such as Cinematic will be required. You may be able to find freeware or shareware that can extract and recombine the audio and video segments from the DVD format.

Encode the Video

Digital video must be compressed and formatted for on line delivery. Otherwise the download will take far too long. Compressing and formatting digital video for web download is called encoding. This will require encoding software, such as Flash or Quicktime Pro.

The software engine that performs encoding is called a codec. One or more codecs are built into various programs for compressing and preparing your video for web delivery. Codecs are designed to produce a video file in one of the major video formats

Deliver the Video - Delivery Methods

There are two main ways to deliver video:

Standard Web Server (HTTP protocol)
Streaming Media Server (RTSP or other proprietary protocol)

In most cases, your viewers won't be able to tell the difference between the two delivery methods. Both methods will start playing soon after the clip starts downloading, and both methods will continue playing without pausing, so long as adequate bandwidth is available.

Media must be prepared differently to support these two delivery method because streaming servers place additional requirements on the media format. Software tools for preparing video usually support both types of delivery; you choose which type when you encode.

Comparison of the delivery methods

The primary advantages of standard web server media delivery are:

All media players are supported
Video is delivered without degradation
Video may be downloaded and saved on the viewer's hard drive
Special preparation for streaming server is not required

The primary advantages of streaming media delivery are:

Viewers can fast forward and fast rewind in the media clip
Media can be copy protected so that viewers can't copy it
Media can be more efficiently delivered on lower bandwidth
Video is somewhat less likely to pause or delay while playing

Recommendation for media delivery method

Standard web server media delivery is recommended for most of our customers applications.

However, we recommend that you consider a Streaming Media Server when you are delivering lengthy clips to a larger audience or anything to a huge audience. For example, if you are delivering an hour-long panel discussion to hundreds of viewers a month, then use a Streaming Media Server. Or, if you are delivering even short clips to tens or hundreds of thousands of viewers a month, use a Streaming Media Server.

WebValence supported media delivery methods

WebValence supports:

Standard Web Server - all media
Streaming Media Server - QuickTime media

Media Players

Viewers see video content via a media player. The media player may appear to the user to be part of their web browser, but it is actually a separate program. Some media players are installed in standard distributions of software on new computers. Media Players that don't ship with new computers are generally downloaded from the web.

Generally, video media must be prepared differently according to your target Media Player. We recommend that you focus on the Media Player and its capabilities to help you decide about how to prepare your video. Below is a list of popular media players (marked * if download required):

Windows Media Player (Macintosh*, Windows)
QuickTime Player (Macintosh, Windows*)
Adobe Flash Player (Linux, Macintosh, Windows, Palm*)
Real Player (Linux*, Macintosh*, Windows*, Palm*)
iTunes (Macintosh, Windows*)

Flash is the only media player available on virtually all shipping computers without a download. For this reason we recommend preparing video clips for Flash delivery.

More on preparing, encoding and delivering video from Adobe Flash Developer

Preparing Flash Media: Encoding

To prepare video for Flash delivery, you will need a recent version of Adobe Flash Professional, such as Version 8 (Adobe CS2) or Version 9 (Adobe CS3). Sorenson Squeeze is another option, advertised as being less expensive.

Purchase or upgrade Adobe Flash
More on Sorenson Squeeze

Start with the highest quality video. Normally this will be a Digital Video (.DV) or QuickTime (.MOV) file on Macintosh, or Audio Video Interleaved (.AVI), Windows Media Video (.WMV), or Motion Picture Experts Group (.MPEG) file on Windows. This file will reside on your hard drive or an external data disk.

Encoding your video using Adobe Flash Professional:

See a video tutorial on encoding video in Flash.

Launch the Flash Application
Create a Flash Document: File > New > Flash File
Import the Movie: File > Import > Import Video
From the Select Video menu: Identify your video file
From the Deployment menu, choose "Progressive Download from Web Server"
Follow the Import Video Wizard to encode your digital video to FLV format (This step may take several hours). When complete, Flash should automatically place an entry corresponding to the FLV file in your Flash Library and prompt you to choose a a skin for your player.
Choose the skin for your player
Flash will display the stage, including an "Instance of the Movie" on the stage.
Resize the player window and/or the stage as desired.
File Export > Movie to create a .SWF file.

Preparing Flash Media: Place Player and Video on Website

Steps to placing the video and player on your website:

Following instruction illustrates the simplest way to provide video on your web site.

You should end up with three files within the folder that contains your original video file. Make sure you place these three files together in the folder you choose on your website. The three files are:
1. The encoded video (.FLV)
2. The SWF file which contains your chosen skin (.SWF)
3. The SWF file which contains your video player (.SWF)
Update the contentPath parameter of the FLVPlayback component before uploading your content to your web site using the following steps:
1. With the component selected, open the Property inspector (Window > Properties > Properties) and select Parameters in the Property inspector, or open the Component inspector (Window > Component Inspector).
2. Enter values for the requested parameters, or use the default settings as appropriate. For the contentPath parameter, do the following:
  1. Double-click the Value cell for the contentPath parameter to activate the Content Path dialog box.
  2. Enter the URL or local path to the FLV file.
Upload your FLV file and both SWF files to your website.
Add a link to the video player .SWF file to your web page.

More typical installations will "embed" the player on a page in the website, or provide a link that opens a custom-sized player window to begin play. Ask your website maintainer for help with these methods.

For more information, see the Adobe Help Resource Center

Preparing QuickTime Streaming Media: Encoding, Referencing and Embedding

Preparing your video for QuickTime Streaming requires three steps.

First, encode a QuickTime movie that is "hinted," meaning it contains information which enables streaming. You may prepare multiple hinted versions of your movie appropriate for various download speeds.
Second, prepare a reference movie which will load your movie from the streaming server, choosing the appropriate version for the viewer's system. The reference movie is only needed if you choose to produce different versions of your movie for different bandwidth settings.
Third, embed your reference movie in a web page and upload it to your web site.

Preparing QuickTime Streaming Media: Encoding a Hinted Movie

To prepare video for delivery with the QuickTime Streaming Server, purchase a license for a current version of QuickTime Pro, available for both Mac and Windows. QuickTime Pro is an inexpensive upgrade to the free QuickTime player.

Other applications, such as iMovie, Cleaner, and Final Cut also encode movies for delivery with QuickTime Streaming. iMovie is a free bundled application that ships with Mac OS X.

Purchase or upgrade QuickTime Pro

Encoding your Video: Prepare a Hinted QuickTime Movie with QuickTime Pro

Open your DV file in QuickTime 7 Pro
Select an appropriate frame to illustrate the Movie and choose View > Set Poster Frame. (The poster frame will be displayed in the player before the movie begins.)
Select File > Export
Select "Movie to QuickTime Movie"
Choose a quality based on how most of your audience will access your movie
Use the "Option" button to access more settings
Select your movie frame size, if smaller than your original DV file
Choose H.264 as your compression type
Check the box "Prepare for Internet Streaming"
Choose "Hinted Streaming" from the drop down menu
Save your file. Choose a name with no spaces, and the extension .mov, e.g. MyHintedMovie.mov
Follow this process again to save multiple files suitable for different viewing speeds. If you do so, name your files so that you will remember which version is which, e.g. 56k.mov, dsl_low.mov, dsl_fast.mov

See the QuickTime Pro Tutorial pages for more information.

Encoding your Video: Prepare a Hinted QuickTime Move using iMovie

Open your DV in iMovie
Select File > Share or File > Export
Select QuickTime and then, under "Compress Movie for" either:

Choose Web Streaming
Click "Share"
Name your file, with no spaces, including the phrase "hinted" and the extension .mov, e.g. MyHintedMovie.mov

-- OR --
Choose Expert Settings
Click "Share"
Select "Movie to QuickTime Movie"
Select the streaming preset for the connection speed you'd like to accommodate. Repeat this process to create files for different connection speeds. If you do so, name your files so that you will remember which version is which, e.g. low.mov, medium.mov

Preparing QuickTime Streaming Media: Uploading your Hinted Movie(s)

Upload the files you have prepared to your web site in a folder named "media" or something similar. Notify support@webvalence.com of the files to be served with the Quicktime Streaming Server.

Preparing QuickTime Streaming Media: Creating and Uploading your Reference Movie

To create your reference movie, you'll need a free copy of MakeRefMovie.

Download MakeRefMovie for Mac

Download MakeRefMovie for Windows

Creating a reference movie with MakeRefMovie

Open MakeRefMovie and choose a name for your reference movie. We recommend a name that corresponds with your hinted movie, with "ref" replacing "hinted." Be sure to use the .mov extension and avoid using spaces.
Choose Movie > Add URL
Delete http:// and enter the full url of the hinted movie you uploaded to the streaming server. If you uploaded multiple versions for different data rates, you can add them one after the other using "Add URL."
Select the parameters that correspond to the hinted movie you've just referenced.
When you've entered a URL for each hinted movie, save your file.
Upload this movie to an appropriate location in your web directory.

For more information see Apple's reference movie tutorial.

Preparing QuickTime Streaming Media: Embedding your Reference Movie

Open the web page you'd like to contain your movie.
Enter the appropriate code required to embed your reference movie. It will look something like

<embed src="myRefMovie.mov"
pluginspage="http://www.apple.com/quicktime/"
width="320" height="240" controller="TRUE"
loop="FALSE" autoplay="TRUE"></embed>
Modify your attributes like width and height, and add others as appropriate.
Upload your web page to your website and test.

See Apple's list of attributes available for the embed tag.

Acceptable Use Policy · Code of Ethics · Contact