- Special Features of the QuickTime Plug-in
- Plug-in Helper
- Saving Movies
- Putting Multiple Movies on a Page
- Detecting the QuickTime Plug-in
Targeting QuickTime Player
Alternately, you can have your poster movies target QuickTime Player. A user who runs short on RAM can simply close any open movies. The HTML looks like this:
<EMBED SRC="Poster1.mov" HREF="HugeMovie1.mov"
TARGET="quicktimeplayer" HEIGHT=136 WIDTH=160> <BR>
<EMBED SRC="Poster2.mov" HREF="HugeMovie2.mov"
TARGET="quicktimeplayer" HEIGHT=136 WIDTH=160> <BR>
<EMBED SRC="Poster3.mov" HREF="HugeMovie3.mov"
TARGET="quicktimeplayer" HEIGHT=136 WIDTH=160> <BR>
To see an example of this approach, load MultiMovie4.htm (in the SpecialDelivery folder on the CD).
One nice thing about this approach is that the movie can be larger than the space allocated to the plug-in or even larger than the browser window.
Targeting a Frame or a Window
QuickTime Player has a distinctive visual interface, which may or may not be what you want. The plug-in has a more neutral interface, and you can customize the Web page around it (or hide the controller altogether). If you prefer to use the plug-in, you can target a frame or a window instead of targeting QuickTime Player. If each poster targets the same frame or window, only one movie loads into memory at any time.
You can either create a frameset with a designated frame for playing movies, or you can let the browser create a new window to play movies in.
In either case, write a small HTML page for each movie, with that movie embedded in it:
<HTML>
<HEAD>
<TITLE>Movie In Window</TITLE>
</HEAD>
<BODY>
<DIV ALIGN="Center">
<H1>Huge Movie 1</H1>
<EMBED SRC="HugeMovie1.mov" HEIGHT=136 WIDTH=160 AUTOPLAY="True">
</DIV>
</BODY>
</HTML>
Use the URL of the page you just wrote in the poster movie's HREF tag, and target a frame or a window. Specify the same target for all the movies:
<EMBED SRC="Poster1.mov" HREF="HugeMovie1.htm"
TARGET="MovieFrame" HEIGHT=136 WIDTH=160> <BR>
<EMBED SRC="Poster2.mov" HREF="HugeMovie2.htm"
TARGET="MovieFrame" HEIGHT=136 WIDTH=160> <BR>
<EMBED SRC="Poster3.mov" HREF="HugeMovie3.htm"
TARGET="MovieFrame" HEIGHT=136 WIDTH=160> <BR>
When the user clicks a poster, the HTML page with the corresponding movie loads and plays in the named frame. If there is no frame with that name, the browser creates a new window. When the user clicks a different poster, a new movie plays in the same place. The old movie and the old copy of the plug-in are dismissed from memory, so only the current movie uses any RAM.
To see an example of this approach, load MultiMovie5.htm (in the SpecialDelivery folder on the CD).
If you use this technique, you can reduce memory requirements and speed up page loading even further by using ordinary HREF anchors instead of poster movies. The links can be text:
<A HREF="HugeMovie1.htm" TARGET="MovieFrame">Play Movie 1</A>
<BR>
<A HREF="HugeMovie2.htm" TARGET="MovieFrame">Play Movie 2</A>
<BR>
<A HREF="HugeMovie3.htm" TARGET="MovieFrame">Play Movie 3</A>
<BR>
<A HREF="HugeMovie1.htm" TARGET="MovieFrame">
<IMG SRC="Movie1.gif"></A> <BR>
<A HREF="HugeMovie2.htm" TARGET="MovieFrame">
<IMG SRC="Movie2.gif"></A> <BR>
<A HREF="HugeMovie3.htm" TARGET="MovieFrame">
<IMG SRC="Movie3.gif"></A> <BR>
If you're using a frameset, and MovieFrame is an existing frame, that's where each movie plays. To see an example of this approach, load MultiMovie6.htm (in the SpecialDelivery folder on the CD).
If there is no frame named MovieFrame , a new window is created with that name. The movies play in this window. To see an example of this approach, load MultiMovie7.htm (in the SpecialDelivery folder on the CD), shown on the next page.
Unfortunately, you cannot control the size or the attributes of a window created from the HTML TARGET parameter. The window will have the size and characteristics of the default window for the user's browser, which may not be what you had in mind at all.
If you want your movies to play in a floating window whose size and characteristics you control, you need to use JavaScript.
Creating a Window with JavaScript
The script that specifies the size and attributes of the target window goes in the head of your main HTML page. Here's an example page:
<html>
<head>
<title>JavaScript Movie Page</title>
<script language="JavaScript">
<!-- hide from old browsers
function openMovie(url) {
windOptions = "toolbar=0,location=0,directories=0,status=0," +
"menubar=0,scrollbars=0,resizable=0,width=320,height=240";
moviewin = window.open(url, "movie", windOptions);
moviewin.focus();
}
// -->
</script>
</head>
<body>
<a href="javascript:openMovie('HugeMovie1.htm')">Movie1</a><BR>
<a href="javascript:openMovie('HugeMovie2.htm')">Movie2</a><BR>
<a href="javascript:openMovie('HugeMovie2.htm')">Movie3</a>
</body>
</html>
The JavaScript function openMovie(url) opens a 320 x 240 window with no distracting bells and whistles: no Back or Home buttons, no What's Cool button, no scroll bars, no nothing; just a simple window. The window is named moviewin , and it's opened on top of any existing windows. The window is created only when someone clicks one of the movie links. It's filled with the specified HTML page, which should contain an embedded movie.
The movie links can be text, as shown in the example above, or GIF or JPEG images. To see an example of this approach, load MultiMovie8.htm.
