Overview

The information presented in this web page is intended to be a concise set of instructions for including streaming media in your HTML-based educational materials (i.e. WebCT).

All Open Campus streaming media is encoded to ISO international standards using an MPEG-4 container format (.MP4), AVC video compression and/or AAC audio compression. Also, Open Campus streaming media is compressed several different ways to allow for different end user bandwidth requirements from dialup modems to broadband internet connections. Open Campus streaming media is hosted on a QuickTime Streaming Server and we recommend the free QuickTime Media Player for playback of streaming media, especially if the media is password protected.

If you are working with streaming video that is hosted on the Open Campus streaming server, you will have been provided with one or more links to reference movies for your streaming video files. A reference movie file is a small file ending in ".mov" or ".qtl" that when opened by a streaming media player will automatically determine the best .mp4 media stream to play based on the available bandwidth of your internet connection. Although not necessary, the use of reference movies is the easiest way to make use of all of the availabe .mp4 bandwidth options.

In this tutorial we'll go over three recommended methods for linking to the reference movies:

1. A simple link using the <a> tag.
2. Embedding the video using the <embed> and <object> tags.
3. Launching the QuickTime player from your web page

A Simple Link Using The <a> Tag

The easiest way to link to your streaming video content is to use the <a> tag just like you would with a standard hyperlink.

For instance, the link to sample.mov looks like this:

<a href="sample.mov">sample.mov</a>

This method is the least desirable for presenting your streaming content. It will either cause the user's web browser download the reference movie file, or it will cause the user's web browser to display the streaming media inside of a new, blank web page. In the case of streaming video, the user will not be able to resize the video (i.e. make it bigger).

Fortunately, we can get around these issues by using ".qtl" files. The new sample.qtl file will look like this:

<a href="www.onlinecampus.org/ref-mov/sample.qtl">sample.qtl</a>

The sample movie will now open in a separate QuickTime player window that you'll be able to resize (you may have to wait a few seconds for the QuickTime Player to start up). Open Campus will provide you with the .qtl hyperlinks that you will need to link up with your media.

Embedding Video Using The <embed> And <object> Tags

Above is an example of an embedded reference movie. Embedding your streaming media allows you to display the streaming media right inside of your web page. This method works best for streaming audio, because streaming video requires you to define fixed height and width values which may not be the same for all of your video streams. For example the sample video above will be displayed at this size weather the user has dialup internet or broadband - even though the broadband stream has a much larger viewable area. As in the first example, the user is not able to resize the embedded video. Below is the HTML code that you'll need to use in order to embed streaming media in your web page.

The HTML code above contains an <object> element which contains several <param> elements and an <embed> element. Here is a breif description of what each of the <embed> parameters are doing:

1. type specifies the MIME type of the streaming media so that the web browser knows which plugin to play the streaming media with. Do not change the value of this parameter.
2. pluginspage this is an optional parameter which gives the user a location that they can download the appropriate plugin from. Do not change the value of this parameter.
3. height refers to the media display height in pixels. If this parameter is not provided, the media will display using its actual hieght. When used it is important to remember to add 16 pixels to the height value if the controller bar will also be used.
4. width refers to the media display width in pixels. If this parameter is not provided, the media will display using its actual width.
5. src refers to the URL or location of the reference movie. The URL can be relative or absolute.
6. scale is an optional value that will scale the media display according to the height and width specified multiplied by the value given. The default value is 1 (i.e. 1x). If you used a 2, the display would be twice as big as the height and width specified (i.e. 2x). You can also use the values "tofit" and "aspect". "tofit" will stretch or compress (change the apsect of) the movie to fit the height and width specified. "aspect" will fit the movie as closely as possible to the height and width specified without changing its aspect ratio.
7. controller is an optional parameter that will not display the controller bar if the value given is "false". The default value is "true". When displayed, the controller bar will use 16 pixels from the value provided in the height parameter.
8. autoplay is an optional parameter that will cause the media to not automatically play if the value given is "false". The default value is "true".

The <embed> element and its parameters are supported by most web browsers except for Internet Explorer. This is why the <embed> element is nested inside the <object> element. Notice that the <object> element has its own height and width parameters. Also, the <object> element contains classid and codebase parameters which are required for your media to work properly inside of Internet Explorer. Do not change the values of classid and codebase. It is also important to note that the values for classid and codebase are different for different kinds of media. The values given in this tutorial are for QuickTime only.

The <param> elements are used to pass additional parameters to Internet Explorer along with the <object> element. Notice that each of the <param> elements duplicate the remaining parameters provided in the <embed> element with the exception of the type and pluginspage parameters, which are specific to the <embed> element. Additional parameters for the <embed> and <object> elements can be found at Apple Computer Inc.'s QuickTime HTML Scripting Tutorial.

Launching A QuickTime Movie From Your Web Page

This is the best method for linking to streaming video in your web page. It is very similar to the embedding method described above. Here is the code listing:

In this code we've added two new parameters

1. target tells the web browser to play the streaming media with the QuickTime Player application.
2. href refers to the to the reference movie's URL. This is the URL for the actual content that will be played in QuickTime Player. The href URL can point to any form of media that the QuickTime player can play.

Note that the src parameter now points to "sample_56k.mov". this movie is just a small clip that can be clicked on to launch the Quicktime Player in order to view the actual streaming content. Also note that the controller bar is now disabled for sample_56k.mov and that the height has been adjusted down to 120px.