AN INTRODUCTION TO E-LEARNING
 HTML for Quicktime
 Part one
Course Resources HTML lab Course Glossary Course Index Last Page Next Page
.
Introduction
Requirements
The basic tag
Adding a controller
More attributes
Resources
HTML practice lab
Assignment


INTRODUCTION

In our last lesson, we learned about the HTML code required to display an image:
 

<img src="the_name_of_your_image.gif"> 

Remember that the SRC option always specifies the name or location of the image file, which can be a relative or exact URL address. In the example above, the image file would need to be located in the same directory as the HTML page. 

Video can add exciting dimensions to your Web pages. In this lesson, we will learn about the code required to display a Quicktime video on the World Wide Web. You should remember from your Media Production class that in streaming Quicktime, the data is being displayed in real time as it arrives at the QuickTime plug-in, and requires special software to be installed on the server. This is known as Real-Time Streaming Protocol (RTSP), and there is another version is known as Real-Time Transport Protocol (RTP). In this lesson, rather than using real-time streaming,  we are simply using HTTP (transfer protocol), and no special server software is required.


REQUIREMENTS

You must have the Apple QuickTime plug-in installed in your browser. If you do not, then click here and download it from Apple's site. Next, go to your web browser and make sure that the QuickTime plug-in is active. For the assignment, use a text editor such as Microsoft Word or Notepad as was demonstrated in class.


BASIC COMMAND

The basic command for placing any QuickTime movie into a Web page is embed.
 

<embed src="your_movie.mov"  width="160" height="120">

Replace "your_movie.mov" with the real name of your movie, and change the values for height and width to match its dimensions. These dimensions are in pixels. If you've forgotten the dimensions of your movie, open it in your Quicktime Player and select 'show movie info' under 'Window'. 


  This code goes after the <body> tag in your document. If you want to position it on the screen, then add one of the positioning tags we've previously learned about, such as <center>.


<center><embed src="movie.mov" width="160" height="120"></center>


ADDING A CONTROLLER

When you specify the exact height and width of the movie, no controller is visible:


 

To display the QuickTime controller on your movie, you have to add 16 pixels to the HEIGHT attribute:


<embed src="movie.mov" width="160 height="136">

 

The QuickTime embed command has more attributes than just setting the height and width:
 

<embed src="movie.mov" width="160" height="136" attribute="value">

 

CONTROLLER is an optional attribute that sets the visibility of the movie controller. The values for this parameter are true and false. If you do not specify and just add 16 pixels to the height, the default value is true, and the controller is visible. 

 
<embed src="movie.mov" width="160" height="136" controller="false">

MORE ATTRIBUTES

AUTOPLAY  is another optional attribute. Acceptable values for this parameter are true and false. When Autoplay is set to true, the movie will begin playing automatically as soon as the QuickTime Plug-In estimates that it will be able to play the entire movie without waiting for additional data.. If you do not specify the parameter, the default value is false, but the user may also specify in their Quicktime Plug-in settings.
 

<embed src="movie.mov" width="160" height="136" autoplay="true">

 

LOOP is either true, falseorpalindrome. By default, loop is set to false. When set to true, the loop attribute makes the movie play continuously. Setting loop to palindrome causes the movie to play alternately forwards and backwards. 
 

<embed src="movie.mov" width="160" height="136" loop="palindrome">

 

CACHE  when specified will allow the browser to cache movies. If the movie is in cache when the user returns to the page, the movie will be played from cache instead of downloading again. CACHE can either be true or false, or simply cache, which implies true. A reason for setting cache to false would be to prevent individuals from saving a movie for use off-line.
 

<embed src="movie.mov" width="160" height="136" cache="true">


RESOURCES

Embedding Quicktime for Web Delivery on Apple's site will give you a complete list of attributes to experiment with.


LAB

On this server is a short test movie named "testme.mov". Try typing some code in the HTML lab to call it up and display it with the various attributes discussed. This movie width is 160 and the height 120.

i.e. - <embed src="testme.mov"..........>

Click to Enter the HTML Lab


ASSIGNMENT

1. Do the quizz in this section. It is worth 2 marks.

2. Prepare your project site for a Quicktime movie. The movie must start automatically and have a visible controller. It should be positioned on a page in a way that is consitent with your overall design. This is worth 3 marks.

Upload your Quicktime movie you produced in media production to your file area on the server. Just as you needed to FTP or HTTP both the HTML file and the image file to your web directory in the last lesson, you will have to upload your Quicktime movie along with your HTML file. Watch the link to your movie and ensure that it is relative!



© 1999, 2000 Michael Shaw