QuickTime: Embedding and Serving Movies with Mac OS X Server

This article lists the steps you must go through to create movies using Final Cut Pro and embed them into a Web page being served by Mac OS X Server. Below is a summary of the overall process, followed by step-by-step instructions.
How to serve embedded QuickTime Streaming Movies using QuickTime Streaming Server (QTSS) and Mac OS X Server.

How QuickTime Streaming Works

When a client uses a web browser such as Navigator or Internet Explorer to view a web page that contains streaming movies, a whole chain of events occurs which makes it possible for the user to actually see the movies. A brief understanding of these events should make it clearer why the steps we follow in this article are necessary.


An Overview of Setting Up Your Movies for Streaming

This article covers, in brief, how to create movies for QTSS streaming, (using Final Cut Pro as an example) and then shows into which directories they'll be placed on your Mac OS X server in order to make them accessible. Before moving on to the actual step by step details, here is an overview of the process as presented in this document.


Make the Movies (Using Final Cut Pro):

1. Edit your movies in Final Cut Pro.

2. Once you're finished editing your final sequence, select it and choose Export Quicktime Movie from the File menu. The following dialog box appears:



Figure 1, Export Quicktime Movie dialog box

3. Click the Options button and the following dialog box appears. The compression settings shown in this document are for example purposes only. You are encouraged to experiment on your own to find the optimal settings for your application.



Figure 2, Movie Settings dialog box

4. Click OK, then Save. The final movie renders and you have a movie that's ready to be served.

Locating Your Movies and Pages on the Server:

1. Once your movies are finished, use your favorite Web page design tool to create the Web pages your movies will live in. Use the embed tags to actually place the movies on the page. See Embedding QuickTime.

2. Now you're ready to copy the appropriate files into the appropriate places.

Note: All the HTML pages you create refer to the location of both graphics files and movie files by relative pathnames. This is a UNIX convention, and works the same way as putting graphics files into a Web page.

For example, when creating pages, use one folder to hold all the documents you'll be linking together for your web site. We'll call this folder "WorkDirectory." Directly inside this folder will be your index.html page, (this is the first page that will load when someone accesses your Web site) and then that page links to other pages and files either in this folder or inside of other folders located inside of WorkDirectory. It is a good idea to keep all your streaming movies together inside their own folder. We'll call this folder "myMovieFiles," and it also is located inside of WorkDirectory.

When you use the Quicktime embed tags to place a streaming movie directly into a page, it looks something like this:

<p><embed src="myMovieFiles/pq_hinted.mov" autoplay="false" controller="true"
cache="true" width="256" height="192"></center><p>

Where the text myMovieFiles/pg_hinted.mov is a path name that specifies that the embedded movie is located in the folder (or directory, in Mac OS X speak) myMovieFiles, which is inside the current directory. This means when you copy the nested set of files and folders from your WorkDirectory folder onto the server, as long as you don't change any file or directory names, all the HTML code works unaltered.

Here's another example path:
folder1/folder2/fileName.mov

Which is the same as saying that fileName.mov is inside of folder2, which in turn is inside of folder1.

3. In order for the server to be able to serve your pages properly, you must have all your files in the right places. All HTML pages, your index.html page and other directories containing pages, images, and movies linked to your index.html page, all get copied into the directory on the Mac OS X Server partition called:

/Local/Library/WebServer/Documents

Note: Mac OS X Server is case sensitive, so directory and file names must be typed exactly as they appear. It's also very important not to change the names of any of the files or directories that you copy onto the server, or otherwise change the way things are organized by moving files from one directory to another. (There is one exception, noted below.) If you do, you're going to have to edit the pages manually on the server using a text editor, renaming all the paths to reflect the changes in name and location that you made.

4. There's one important exception to the above. All the hinted QuickTime movies you embedded in your web page, (which you put inside the myMovieFiles folder on your authoring computer) go inside the media folder you specified when you configured the QuickTime Server software. The default directory for the Quicktime Streaming Server software is:

/Local/Library/QuickTimeStreaming/Movies

If you don't put your hinted movies into this directory, they won't stream. In order for your web pages to still have these movies embedded, however, you'll need to place referencing movies into the myMovieFiles directory now located in the WebServer/Documents directory. These referencing movies point to the movies now located in the QuickTimeStreaming/Movies directory, enabling everything to work the way it should.

5. Make your referencing movies.

A referencing movie is a movie that selects another movie to play in its place. Referencing movies are very small, consisting only of an instruction which points to the original movie file located in /Local/Library/QuickTimeStreaming/Movies.

You create a referencing movie by following these steps:


With these steps completed, the final test is to load the page using a browser on a remote computer and see if the movie loads properly.

Related Documents

31016 QuickTime Streaming Server: Verifying Installation
61011 QuickTime: Embedding QuickTime for Web Delivery

Published Date: Feb 20, 2012