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.




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. 


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. 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". 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