Using Your Captures: Digital/Online Formats

Our Favorite Form of Digital Presentation: Web Pages

One of the simplest ways to display a QuickTime movie is to insert it into a Web page. This affords one:

• Easy distribution.
  • Either through the public Web (if copyright is not a concern) or through a private, password-protected network.
  • QuickTime's de facto streaming (called "Fast Start" by Apple) lets the video begin to play before the entire file has downloaded.
• Portability.
  • Web pages may be copied onto Zip disks, CD-ROMs, and DVDs and carried into classrooms without network access.
• Low software requirements.
  • Web pages may be created with a text editor, if necessary.
• Cross-platform compatibility.
  • Windows and Mac computers may access the same files.

How to Insert a QuickTime Clip into a Web Page:
The Inexpensive, But Slightly Tricky Way

(A Quicktime movie normally on this page has been temporarily removed due to bandwidth concerns. Thanks for understanding.)

We have here inserted the Nothing Sacred QuickTime file we created and processed in part 5 and part 6. If you're already proficient in the Hypertext Markup Language (HTML), just check our source code to see how we did it. If you're new to HTML, click here to open a new window that contains the code behind the Web page. It'll help as you go through the next steps.

1. Using a text editor or an HTML editor, create a simple Web page and save it on your hard drive.
2. Put your QuickTime file, NothingSacred.mov, in the same folder.
3. Use the EMBED tag to insert NothingSacred.mov into your Web page. In our source code example, scroll to the bottom and look for: [use PEAR directions in "Highlight Source Code in Your PHP Application" to highlight all code: http://www.sitepoint.com/article/highlight-source-code-php ]
   <embed
src="NothingSacred.mov"
width="320"
height="240"
>
</embed>
   • The EMBED tag tells your browser to insert something at this point. The text between <embed and the closing angle bracket (>) four lines below contains specific directions for how the embedding should be done. These are called "parameters" or "attributes" in the world of HTML.
   • The SRC ("source") parameter specifies the file to insert.
   • The WIDTH parameter sets the width of the image in pixels (320, in our example).
   • The HEIGHT parameter sets the height of the image in pixels (240, in our example).
   • The final line, </embed>, completes the embedding process.
   • Click here to see the result of this HTML code in a new window.
4. But what if you want to further control the appearance and actions of the QuickTime movie? The answer is more parameters. Apple provides a long list of parameters, but we'll satisfy ourselves with just three.
   • autoplay="false"
     • Tells the browser not to immediately start playing the movie.
   • controller="true"
     • Tells the browser to show the player controls so the user may stop, start, pause, etc. the movie.
   • pluginspage="http://www.apple.com/quicktime/download/"
     • Directs the browser to Apple's Website if it does not have the necessary software (a "plug-in") to play the movie. Thus, it refers you to a "plug-ins page."
   • The final result after these additional parameters is:
     • <embed
src="NothingSacred.mov"
width="320"
height="256"
autoplay="false"
controller="true"
pluginspage="http://www.apple.com/quicktime/download/">
</embed>
   • Note: we've changed the height to 256 (from 240). This is to make room for the player controls that appear at the bottom of the movie. Each time you use the controller, add 16 pixels to the height.
   • Click here to see the result of this HTML code in a new window.(Again, a Quicktime movie normally on this page has been temporarily removed due to bandwidth concerns.)
5. But wait, there's more to be done!
6. Until recently, you'd be finished now.
   
   But Microsoft changed the way that QuickTime movies display in Internet Explorer when it released version 5.5 for Windows in July 2000. This forced Apple to hurriedly create an "Active X control" for QuickTime. The exceedingly boring details are over here.
   
   What does this mean to us QuickTime Web developers?
   
   We need to wrap more HTML code around our EMBED tag.
7. If you haven't already, click here to open a new window that contains the code behind our QuickTime Web page. Scroll down in it and you'll notice that the <embed tag comes after a whole bunch of other stuff--starting with an <object tag.
   
   This OBJECT tag solves the Internet Explorer problem.
8. Place the first half of the OBJECT tag (<object) before the EMBED tag! (You'll put the second half of it [</object>] after the entire EMBED tag.)
9. The OBJECT tag contains two unique parameters that never change:
   • classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
   • codebase="http://www.apple.com/qtactivex/qtplugin.cab"
     • (Quite a mouthful, eh?)
     • These two parameters identify this embedded object as a QuickTime object.
10. Next, just as we did above with the EMBED tag, add these parameters to <object:
    • width="320"
    • height="256"
11. The OBJECT tag requires all the same parameters as the EMBED tag. So, despite the duplication of effort, you've got to add SRC, AUTOPLAYER, CONTROLLER and any other EMBED parameters to OJBECT, but the way you add this is different. Instead of putting them directly with <object you add separate PARAM (as in "parameter") tags.
    • <param name="SRC" value="NothingSacred.mov">
    • <param name="AUTOPLAY" value="false">
    • <param name="CONTROLLER" value="true">
      
12. Put that together and you've got all of this coming before we see the EMBED tag:
    • <object
      • classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
      • width="320"
      • height="256"
      • codebase="http://www.apple.com/qtactivex/qtplugin.cab">
    • <param name="SRC" value="NothingSacred.mov">
    • <param name="AUTOPLAY" value="false">
    • <param name="CONTROLLER" value="true">
13. Follow all this with
    • <embed
src="NothingSacred.mov"
width="320"
height="256"
autoplay="false"
controller="true"
pluginspage="http://www.apple.com/quicktime/download/">
</embed>
14. Finally, follow </embed> with </object> which is the closing part of the OBJECT tag.
15. Now, you are done.

Surely There's an Easier Way!

We always believe in doing things as inexpensively as possible, but if your software budget can stretch to include Macromedia Dreamweaver, you can greatly simplify the process of embedding QuickTime movies. (Dreamweaver, bundled with Fireworks, and Flash, sells for under $200--academic price.)

1. Use Dreamweaver to create a Web page.
2. Install a special, free Dreamweaver extension titled fiXMovie, which automates the process of inserting QuickTime movies.
3. From the Insert menu, select fiXMovie, which will open a "Select File" dialog box. Select the QuickTime movie file you wish to embed.
   
4. A gray, "ActiveX" object box will appear in your Webpage.
   
   It holds the place where the QuickTime movie will appear when you view the page in a Web browser.
5. The Dreamweaver Property Inspector will contain all the OBJECT material we painstakingly typed in above--including classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"!
   
6. But fiXMovie is not perfect and modifications are necessary. In the Property Inspector, modify the width (W) setting to match our clip--320 pixels. And similarly, the height (H) setting must be changed to 256.
7. To change the other parameters, click the "Parameters..." button to reveal the Parameters dialog box.
   
8. You could leave this as it is, but if you prefer that the player does not start immediately, you must click the "true" value next to "AUTOPLAY" and type in the word, "false."
9. Your QuickTime Web page is now ready for displaying on the Web or a CD-ROM. Copy the HTML and QuickTime files to a Web server or burn them to a CD-ROM and you're ready to go.
10. Click here to see the finished product in a new window.

Double Your Pleasure

One often heard complaint about movies on the Web is that the image is too small. Our 320-by-240 pixel Nothing Sacred movie occupies less than a quarter of the computer screen. QuickTime provides some relief for this problem. It allows us to double the size of the movie while we are viewing it. Thus, our 320-by-240 image becomes 640 by 480--still not full frame, but an acceptable quality image considering how close one sits to a computer monitor.

We here detail the necessary changes one makes in Dreamweaver to double-size a QuickTime movie, but the same thing may be accomplished using a text editor to change the QuickTime parameters.

1. Return to our embedded QuickTime movie from above and select the ActiveX box.
   
2. In the Property Inspector, increase the width (W) setting to 640 (twice 320) and the height (H) setting to 496 (twice 240; and don't forget to add 16 pixels for the player controller).
3. Click the Parameter button to reveal the Parameters dialog box.
   
4. Click the button to add a new parameter.
   
5. Type in "SCALE" (no quotation marks) in the Parameter column and "2" (no quotation marks) in the Value column. Click OK to close the Parameter dialog box.
6. The Nothing Sacred movie is now double-sized! The remarkable thing about current compression software such as Sorenson is that movies still look acceptable at this bigger size.
   
   Click here to see the double-sized movie in a new window. The image quality is remarkably good, innit?

Further Reading

• Apple Computer, "Embedding QuickTime for Web Delivery," www.apple.com/quicktime/authoring/embed.html .
• Apple Computer, "QuickTime and Internet Explorer Version 5.5 SP2 and 6.0 for Windows," www.apple.com/quicktime/tools_tips/tutorials/activex.html .
• Apple Computer, "QuickTime Documentation," developer.apple.com/documentation/QuickTime/QuickTime.html
• Egbert, David, "QuickTime Authoring for Education," BYU Instructional Media Center, homepage.mac.com/qt4edu (no longer available).
• Gulie, Steven, QuickTime for the Web (San Diego: Morgan Kaufmann, 2001).
  
• Heltzel, Paul, "Good-bye, VHS; Hello, DVD," PC World, www.pcworld.com/reviews/article/0,aid,112029,00.asp
• Lowney, Frank, "QuickTime for Educators: Beyond Video Clips," www.faculty.de.gcsu.edu/~flowney/quicktime/TS/QT4Ed/
• Microsoft Corporation, "Unable to Insert QuickTime Movies [in PowerPoint]," Microsoft Knowledge Base Article Q235950, support.microsoft.com/default.aspx?scid=kb;EN-US;q235950 .
• Mills, Douglas, "Comparing Streaming Media Technologies for Instructional Purposes: QuickTime," www.iei.uiuc.edu/qt/
• Harper, Georgia K., "Crash Course in Copyright," The University of Texas System, www.utsystem.edu/ogc/intellectualproperty/cprtindx.htm
• "Pixel." Wikipedia, The Free Encyclopedia. 17 Oct 2006, 01:28 UTC. Wikimedia Foundation, Inc. 20 Oct 2006 <http://en.wikipedia.org/w/index.php?title=Pixel&oldid=81908607>.
• Stone, Ken, "QuickTime Pro - QT Movies from Final Cut Pro," www.kenstone.net/fcp_homepage/qt_movies_from_fcp.html.