QuickTime for the Web Guide

Guide to Using QuickTime and other movie f ormats on the Web

Stephen Wilson, Professor, Art Dept, SFSU (contact details below)

Types of Web Video

There are two major types of video for the web. Regular video file formats must be downloaded by the visitors computer before viewing. The disadavantage is that viewers must wait for the whole file to download. Once the file arrives, the user is free to watch it and even save the video on their local machine.

Streaming video is a format that comes part by part as it arrives. The advantage is that it begins showing as soon as enough is buffered to show. Sometimes if the network situation changes the video can hiccup while it waits for enough of the stream to arrive. Also the digital files are discarded once they are viewed. They cannot be saved on the local computer - quite an advantage from the producers standpoint who is concerned about guarding intellectual property rights. The disadvantage is that streaming files may requre a special server to distribute them and special encoders to convert the files to the right format. The encoders are often proprietory software with the attendant expence.

There is also a pseudo streaming Quicktime format called fast start that plays as it arrives although it is subject to download once it is done.

Preparing Quicktime Video for Web Presentation

Most web browsers support the display of QuickTime movies. The viewer must have appropriate plug-ins in their system files in order for the movies to be displayed within the browser window. (For example, Microsoft does not automatically distribute quicktime with Internet Explorer (IE) - viewers need to download it.) IE has native support for .wmv files and may require use of tags that are different than those explained here. This guide explains the techniques necessary to prepare and display Quicktime Movies. Also note that sound only Quicktime movies can be used as a way of presenting web sound. See my guide to using web audio. Much of that guide also pertains to regular quicktime visual movies.

Creating or obtaining a QuickTime movie: Prepare a Quicktime movie using any of the normal methods - digitizing, video composition software such as Premiere, export from animation software such as Director, or 3-D animation software.
Planning for bandwidth: Be sensitive to Web bandwidth limitations. Movies can be huge files such that even with high bandwidth users may have to wait. Research shows casual surfing visitors will leave a site that has long wait times. Minimize your file size using techniques such as small windows and low frame rates. Quicktime pro and most video editing programs offer options for making the choices

Frame size: make the window as small as you will still do justice to the movie. For example reducing a 640x480 movie to 320x240 reduces file size to 1/4. Reducting to 240x180 reduces it to approximately 1/7 size
Frame rate: Full motion video uses 30 frames/second. Many movies do not require that frame reate to render respectable motion. Reduce your frame rate to 15,12 or 10 frames/second if appropriate for your movie.
Compressor choice and settings: Different codecs (compressor/decompressor) are better than others at maintaining quality while reducing frame size - although they may take more time to compress and may require several passes. Also you can trade off quality of compression for file size. Professional programs such as Apple's Compressor (which comes with Final Cut Pro) give detailed choices about compression including options optimized for web transmission. Be careful about picking exotic codecs - viewers will not be able to see the videos if they don't have the proper codec installed with their Quicktime. Here are some links to information about video compression and comparisons of codecs.
Video Codec Shootout - extreme tech
A comparison of codecs in QuickTime - MacCentre701
Choosing a Codec- Jan Ozer - Streaming Media
Wiki video codecs
Wiki video compression

Set the file for quick start if you want pseudo streaming and hinted movie if you are preparing a streaming movie. (Remember hinted movies will require special servers to send them.) See Apple's guidelines for streaming movies
Flattening the movie: In the old days Macintosh and Windows files had different file formats. Mac files had data and resource forks. Windows dust had one file. Mac developers had to save the movie in "flattened" form if they wanted windows computers to read it. Now most programs create flattened video files by default.
User system requirements: Think carefully about your users. They will not be able to see QuickTime embedded in web pages unless they have downloaded or otherwise obtained the QuickTime plug-in. You should consider placing the download address on your web page. (http://quicktime.apple.com/sw/sw.html) Even without the plug-in they would be able to view the movie via helper applications. Also, they will need quicktime capability in their operating system. All contemporary Macintoshes come with QuickTime and it is freely downloadable for Windows systems.
Your web server must have its MIME settings configured to properly serve the the type of video files you are offereing.
Prepare your web page html to display the video- see below

Other Video File Formats

In addition to Quicktime there are many other file formats - for example windows media player, realvideo, flash video, quicktimevr, and even some emerging formats. You can get more information about preparing and serving these formats on the web.

Preparing html to embed video.

Video used to be inserted by use of the EMBED tag. Contempoarary web browsers, however, are moving toward supporting web standard <OBJECT> tags. The best strategy for now is to support both tags. The sample below illustrates how that can be done. The Apple quicktime web site recommends the code below. Note that the classid is specific to whatever plug in is going to be used to play the video. Apple provides that id. Other companies have other id's for their plug-ins.

There are many parameters that you can set. The src must link to the correct relative or full path to the movie. Width and height can either be the dimensions of your source movie or an enlarged or reduced version. Be careful to maintain the aspect ration (proportion width/height). Leave 20 pixels extra on height if you plan to show the controller. Also note that enlarging the dimensions beyond the original may result in pixellation. The codebase is the address that will automatically come up if the user doesn't have the plug-in.

Notice the EMBED tag within the OBJECT tag along with its own parameters. Any changes need to be made in both the PARAM and the values within the EMBED tag. The name for the PARAM's may be different than the names for the EMBED versions. Apple provides a guide to embedding quicktime and the different PARAM's that can be set.

</OBJECT>

Options for PARAM

Parameter name	Function	Legal Values
AUTOPLAY	Start playing movie automatically, do not wait for user to press Play button	True \| False \| @HH:MM:SS:FF
BGCOLOR	Set background color for area alloted to QuickTime but not occupied by movie	#rrggbb \| ColorName
CONTROLLER	Show or hide the movie controller bar	True \| False
ENABLEJAVASCRIPT	Initialize JavaScript connections between HTML and plug-in	True
ENDTIME	Stop playing a movie at a specified point in the movie timeline	HH:MM:SS:FF
HREF	Specify a URL to load when the user clicks on the movie	URL
LOOP	Make a movie loop or play alternately forward and backward	True \| False \| Palindrome
SCALE	Scale movie to fit in a rectangle, adjust aspect ratio, or set a size scaling factor	ToFit \| Aspect \| n
STARTTIME	Begin playing at time offset into the movie	HH:MM:SS:FF
TARGET	Play movie in QuickTime Player, named frame, or replace current movie	quicktimeplayer \| TargetFrameName \| myself
VOLUME	Set audio volume level	0 - 255

**Note these are derived from the Apple Quicktime HTML information page. For a full list see Apple guide to embedding quicktime

Movie as link

The movie itself can serve as a link: (HREF=url) Clicking on the movie activates the browser to load the requested page. The controller option must be false to allow this option.

<EMBED SRC="Myquicktime.mov" HEIGHT=240 WIDTH=180 CONTROLLER=FALSE 
HREF="http://netad.com/file.html">

The movie can load its new page in another page or fram by using target: When the movie is a link the TARGET option can be used to place the retrieved page in another frame or window. If you are not familiar with frames, see the entry in this guide. The following would make the movie a link and place the linked page in a frame or window that had been named "display".

<EMBED SRC="Myquicktime.mov" HEIGHT=240 WIDTH=180 CONTROLLER=FALSE HREF="http://netad.com/file.html"
        TARGET="display">

For details about how to use javascript to control quicktime, see wilson guide to controlling quicktime

- This page created by Stephen Wilson, Professor Conceptual Information Arts (CIA), SFSU (http://userwww.sfsu.edu/~swilson)
- More information about the Conceptual Information Arts program is available at (http://userwww.sfsu.edu/~infoarts)
- It is a resource used in Art511 Art&Telecommunications course (http://userwww.sfsu.edu/~infoarts/Tele/Tele.index.html)
- Other advanced Web authoring resources can be found in the Web.how-to guide
- A comprehensive guide to Web design is available in the book World Wide Web Design Guide (Hayden Books) by Stephen Wilson swilson@sfsu.edu
- The url of this page is (http://userwww.sfsu.edu/~infoarts/technical/howto/wilson.quicktime.html) 11/6/06