Originally written for the SWAP Club at my school, this article now lives on here.

Encoding video for the web and getting it onto your website can be a time consuming and frustrating experience. These steps will make the process simple and easy.

Media Formats

There a slew of various media players and formats to choose from, here's a few of the major players:

Player Pros Cons

Windows Media

- Large user base
- Wide Array of Codecs

- WM Codec is sub-par
- Cumbersome Default Interface

QuickTime

- Lots of Codecs including MPEG4
- Easy to embed

- May not be on Windows by default (20-30%)
- Encoder is not free

Real Player

- Excellent low bandwidth codec
- Free Encoder and Media server

- Single codec
- Invasive and obtuse player

Flash

- Near full market saturation
- Interactive video manipulation & integration

- Poor video codec
- Difficult to author (Flash is complex)

We've chosen to use QuickTime for this demo because of it's support for the excellent MPEG4 video encoder as well as it's availability and ease-of-use.

Quicktime Encoding

Before you begin encoding your video for the web, you will need to get it out of your application in one of two formats:

Perparing an Image Sequence

If you are working from a sequence of images, QuickTime can be used to create a movie out of these in just a few steps. Once you have a .MOV file, you can use the demo in the next section to create a web-ready video file. This demo will show you how to import an image sequence into QuickTime.

Encoding a Movie (.mov)

Once you have a movie you are ready to work with, it is time to export it for web playback. This demo will show you how to encode your .MOV files for use on the web.

Web Page Embedding

Now that you have you video encoded for web playback, you'll need to setup a webpage to play it. We're assuming you know how to upload the files via FTP and already have your HTML pages set up. This will show you what code you need to add to make the videos show up.

Basic, Auto Start

First, lets get the basics of embedding covered. There is a single HTML tag required to embed a video <embed></embed>. This tag has four primary attributes which are required to embed video.

Here is an example of a streamlined embed tag for a video clip at 320px wide and 240px high:

<embed type="video/quicktime" src="mini-ad.mp4" width="320" height="256"></embed>

This tag has four attributes:

  1. The type attribute tells the browser to use the QuickTime plugin.
  2. The path to the movie that you want to play is inserted into src="".
  3. The height of the movie in pixels is inserted into height="".
  4. The width of the movie in pixels is inserted into width="".

Important! You'll notice that for a movie with a height of 240, the attribute for height is 256. This is critical because the frame for the player must include 16 pixels of height for the playback bar. Just remember, always add 16 to the height of your movie's height for the playback bar.

While this would embed a video into your webpage, there are several other parameters which can be added to give you more control.

View an example of the basic embed tag →

Wait To Play Movie

Sometimes, you may not want the movie to automatically play. To accomplish this you'll need to add a new attribute to your embed tag: "autoplay".The autoplay attribute should be set to false. Here is an example of the revised embed tag:

<embed type="video/quicktime" src="mini-ad.mp4" width="320" height="256" autoplay="false" ></embed>

View an example of the "Wait to Play Movie" →

Still Frame, Click to Play

Other times, you may want the to show a single frame from the movie, and wait for visitors to click it to begin playback. This method is great because it will only load the small preview movie, and reduce load time and save bandwidth. This method requires two additional attributes in the embed tag along with an extra mp4 or mov.

Single Frame Movie

To create a still frame movie, follow these steps:

  1. Create an image to use in Photoshop
    The dimensions should be the same width as the movie, but 16 pixels taller than the movie.
  2. Save the image as a JPEG
    Menu "File" > "Save as..."
  3. Open QuickTime and open the JPEG file.
    Menu "File" > "Open movie in new player"
  4. Export the JPEG as an MP4 Video
    Menu "File" > "Export"
  5. Save as an MP4 video

You now have your still frame movie.

The embed tag and extra attributes

The extra attributes are href and target.

Here is a modified embed tag for a "Single frame, Click to play" video:

<embed type="video/quicktime" src="mini-preview.mp4" href="mini-ad.mp4" target="myself" width="320" height="256" controller="false" autoplay="false"></embed>

In this example, SRC is given the path to the single frame movie called "mini-preview.mp4". This is what will be initially shown. HREF is given the path to the movie, "mini-ad.mp4". This is movie will play when visitors click in the video area. Target="myself" instructs the movie to replace the single frame movie with the full movie. Finally, the attribute CONTROLLER set to false hides the playback bar until the movie starts.

View an example of the "Single Frame, Click to Play Movie" →

Extra Precautions

Because no two computers are alike, it's very common for some visitors to not have the QuickTime plugin installed. Should this be the case, the pluginspage attribute can direct the browser to where to download the plugin. Additionally, in cases where the user can not see or hear, the alt attribute will be given to them in place of the movie..

  • pluginspage
    Provide the browser a link to where an updated quicktime player can be found.
  • alt
    Added as an alternate message for the visually impaired to read

Here is an example of these properties in action:

<embed type="quicktime" pluginspage="http://quicktime.apple.com/" src="mini-ad.mp4.mov" width="320" height="256" autoplay="false" alt="This is a test movie."></embed>

Links

So You Want to Embed A Video, Huh?
http://www.htmlgoodies.com/tutorials/web_graphics/article.php/3480061

Embedding Video
http://www.fluffbucket.com/nsc/videoadd.htm

Special Thanks

Thanks to Ian Jones, an animator at the Art Institute, for the use of his work for the video clips here.