How to Incorporate Media Files on Monash Streaming Media Server into Your Web Pages - Embedding QuickTime Objects
| The process described here refers to QuickTime 4.x or above. |
The following document describes the process by which we can embed a QuickTime object into a web page. There are a few ways that this can be done, however, the method outlined here is designed to ensure that our streaming media files are played via the QuickTime plug-in and no other plug-in that may have usurped the quicktime extension. The process described here will also ensure that our streaming media file is presented correctly in both the latest versions of the Netscape and Internet Explorer Browsers.
In this How-To we assume that readers already know how to create HTML pages and upload them to a web server. Having prior knowledge of hand-coding HTML would be a distinct advantage when tackling the procedures laid out in this document.
Some Background
|
We can make sure that our streaming media file is fully functioning by opening it in the QuickTime player from the streaming server before writing any HTML code. To find out how to do this refer to "How to View Files on the Monash Streaming Media Server". |
Within Monash University HTML web pages and streaming media files are generally housed on two different servers. Web pages are mostly hosted on the web server (Silas) and streamed media files on Mediaserver. This is not unusual; there is no need for the streamed media files and the webpages they are embedded in, to be on the same server. But we must consider the relation between the two before we attempt to produce pages with streamed media embedded in them. Basically what this means is that we need to know the fully qualified URL (web address) of our streamed media files on Mediaserver. For example the URL of the file we will use as an example is <rtsp://mediaserver.monash.edu.au/sample.mov>.
There are a few other things that we are going to need before we can create the HTML for our web page.
Firstly we are going to need the dimensions of our streaming movie. To find this out, we open our movie in the QuickTime player then select "Show Movie I nfo" from the "Window" menu. A dialogue box similar to the following should appear.
Click the arrow next to "More Info:" to expand the "Movie Info" dialogue box.
| The "qt4req.qtif " image that we have used in this demo can be downloaded here. Use this instead of making one if you like, however it is a little larger then necessary. |
Jot down somewhere the "Normal Size" of the movie. This is represented in terms of "Width x Height". The size of the sample.mov we will refer to is 240 pixels high by 180 wide.
The next thing we need is a small QuickTime Image File (.qtif). No great artistry is required for this file as it is most likely never going to be seen. This file will be used as a place-holder for our streamed movie - more about this later on. To create a .qtif file open any recognised image file in the QuickTime PictureView application (which comes with QuickTime) then choose "Export" from the "File" menu and save the file as a "Quicktime Image". The file you use can be quite small. This image should also contain a similar message to this: "Upgrade to the Latest QuickTime Now".
Object V EmbedThe object tag forms part of the W3C recommendation
for HTML
4.0. The embed tag does not. So apparently the Netscape specific
embed tag is the proprietary interloper in this case. If you are
thinking of not using one in favour of the other, then think again,
there are accessibility issues to bear in mind: |
We're nearly ready, now all we need is the HTML file into which we will embed the QuickTime object. We can quickly whip up a basic HTML file in any text or WYSIWYG editor if we don't have one ready to go. Once we have our file, we need to use a text editor or the "HTML"/"Code View" of our WYSIWYG editor to write the embedded object code into the HTML page.
Because Netscape and Internet Explorer recognise different code for the embedding of plug-ins (objects) into web pages we must provide the code for both otherwise users of one browser or the other will miss out on the experience. The standard practice is to use Netscape's "Embed" tag nested inside Explorers "Object" tag.
The following code is a basic example of the code required to embed our "sample.mov" file into a web page.
|
|
So What does all this Gobbledygook Mean?
|
If you can view the "sample.mov" file within the
QuickTime player by opening the URL |
First of all we can see how there is the EMBED tag nested inside the OBJECT tags. Look closely and we can see that the same information is repeated in the object tags as are in the embed tags with one or two exceptions.
The object tag has two unique attributes, the CLASSID and the CODEBASE - these two respectively tell Internet Explorer which activeX (plug-in) control to use to display the object and where to download it from if it is not already installed. Similarly, the embed tag has the unique attribute PLUGINSPAGE which tells the Netscape browser where to go to download the required plug-in if it does not have a plug-in installed that can handle the embedded object.
The remainder of the attributes/parameters (PARAM) appear, as stated earlier, in both the object and the embed tags here is a brief explanation of what each one of them does.
Width/Height
Whilst the use of WIDTH and HEIGHT attributes are fairly
obvious there are one or two important things to know about their
usage.
If you want a controller to appear under an embedded
movie, you must add 16 to the HEIGHT of the movie. As can be seen
in the sample code above we set the HEIGHT of the move to 196 and
not 180.
If you are embedding an audio file by itself
into a page and want a controller for it, set the HEIGHT of the move
to 16 and the WIDTH to something that fits in with the design of
your page.
Never set HEIGHT or WIDTH to less then 2,
even if the movie is to be hidden. This can cause problems.
If you want to embed just a play/pause button for a sound movie,
set both HEIGHT and WIDTH to 16.
| By rights the OBJECT tag should also include the TYPE attribute; however, if we place the TYPE attribute inside the opening OBJECT tag, Netscape suddenly recognises the OBJECT tag but has no idea what to do with it. None of the research we have done suggest that making TYPE a parameter of the object tag has any effect at all. |
Type (Attribute of Embed Only)
The TYPE attribute can be used to set the mime-type of the file that is embedded. Setting this attribute helps to ensure that the file is played by the QuickTime player.
Qtsrc
Setting the QTSRC attribute overrides the SRC attribute that is the standard for the object/embed tags. It insures that the media file we want to play is played by the QuickTime plug-in because no other plug-in can recognise the QTSRC attribute. The QTSRC parameter should be set to the absolute or relative URL that points to the media file we wish to play.
Src
The SRC attribute would normally be used to point to the media file we wish to play, however, in the case of this example code we use it to point to an image file as a place holder. We do this for two reasons - firstly, without the SRC attribute, the end user's web browser becomes confused and does not know what to do with the object/embed tag and secondly, QuickTime 3.0 does not recognise the QTSRC tag. As QT3 does not understand the QTSRC tag it will display the image we have pointed to with the SRC attribute instead. This is why the the "qtif" file we create as a place holder should contain a message telling the user to upgrade.
Autoplay
This attribute is very simple it can be set to "true" or "false" as its name suggests. Setting AUTOPLAY to "true" will make the QuickTime plug-in automatically start playing our media file.
Controller
Like AUTOPLAY, the CONTROLLER can be set to "true" or "false". When set to "true" it displays the controller (play/pause button etc) and if it is set to "false", it disables the controller and hides it.
These are but a few of the forty or so attributes that you can set when embedding a QuickTime object into a web page. For more information about embedding a QuickTime object, the "Embedding QuickTime for Web Delivery" tutorial is a great place to start.
Once we have added the embedded object code to our web page, all that is left to do is to save our page, upload it to the server and then test the page to make sure it works.
The result of the code used above can be seen here if QuickTime is installed.
In this document, we have seen how to embed a QuickTime move into a web page. The example given is a very simple example but this should give us a general idea of the concepts involved in embedding Quicktime objects.