How to...Embed QuickTime Files in a Page

"How To" documents are step-by-step explanations for performing certain common tasks. For broader and more detailed Help documentation, as well as "Quick Guides," visit the Help Main Menu.

The Task: Embed a QuickTime audio or video file so it displays and plays from within a class webpage

Note that these instructions assume the user's computer already has the free QuickTime player installed, which is true for almost all modern systems. Otherwise, the user will need to download and install QuickTime.

1. While you can always create a link to a QuickTime audio or video file, in some cases you might prefer to embed the file directly into a class webpage. That allows you to place it within the page in much the same way you would position an image on the page, and users can play the file on the spot.

2. To begin with, you need a suitable QuickTime-friendly audio or video file. Generally this means an .mp3 file (audio), an .m4a or .m4b file (slide show with audio; for example, a PowerPoint presentation with an audio track created in ProfCast), or an .mp4, .m4v, or .mov file (video; for example, a movie file created in iMovie). ProfCast users: Please see note at bottom of this page.

3. For video files (such as .mp4, .m4v, or .mov) in particular, you must be certain the file is optimized for delivery on the Web. See also, How to...Plan Use of Multimedia Files.

4. For video files, you'll need to know the movie dimensions. If you don't know the dimensions at which you saved the file, you can find out by right-clicking on the file and choosing "Get Info." In the Info dialogue box, look for something like "Dimensions: 640 x 480." The first value represents the width (in pixels) and the second represents the height. You'll need to remember those numbers. (This step should not be necessary for audio files.)

5. Having taken these steps and armed yourself with the width and height of your movie file, log into your CATE account and go to the page where you want to embed the file. Most commonly this will be a specific block on a Presentation page—although it's possible to do the same thing in many other locations—so that's what we describe here.

6. At the block level, click "Edit Text." Scroll down to the "Text for this block" heading.

7. In the text entry area, enter the following information:

<EMBED SRC=full_URL_of_file WIDTH=width_of_file HEIGHT=height_of_file AUTOPLAY=false>

• In place of "full_URL_of_file" enter the URL of the file. For example, http://online.santarosa.edu/homepage/billstone/movie.mov

• In place of "width_of_file" enter the width you looked up earlier.

• In place of "height_of_file" enter the height you looked up earlier, plus 16. (This provides the extra space needed for the controls.)

8. This will give you an HTML tag with parameters something like this:

<EMBED SRC=http://online.santarosa.edu/homepage/billstone/movie.mov WIDTH=640 HEIGHT=496 AUTOPLAY=false>

9. If you are embedding an audio file, you can omit the width parameter entirely. (In general, you should be able to omit both width and height, but that can cause spacing problems in some versions of Firefox.)

<EMBED SRC=http://online.santarosa.edu/homepage/billstone/audio.mp3 HEIGHT=16 AUTOPLAY=false>

10. For most browsers (including Safari on Macintosh, Internet Explorer on Mac, Firefox on both Mac and Windows, and Netscape Navigator on both Mac and Windows), the simple "embed" tag will be sufficient to place an audio and video file in a webpage. Unfortunately, when running some versions of Internet Explorer on a Windows system, Microsoft requires users to download and install the ActiveX control for QuickTime from Apple. (The Active X control for QuickTime is separate from QuickTime itself.) To accommodate those users, the "embed" tag needs to be wrapped in the following "object" tag:

<OBJECT CLASSID=clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B WIDTH=width_of_file HEIGHT=height_of_file CODEBASE=http://www.apple.com/qtactivex/qtplugin.cab>
<PARAM name=SRC VALUE=full_URL_of_file>
<PARAM name=AUTOPLAY VALUE=false>
<EMBED TAG GOES HERE WITH SRC, WIDTH, HEIGHT, AND AUTOPLAY PARAMETERS AS SHOWN IN NO. 8 (above)>
</EMBED>
</OBJECT>

11. By replacing the "full_URL_of_file" and "width_of_file" and "height_of_file" with exactly the same values you used in the embed tag, you'll end up with something like this:

<OBJECT CLASSID=clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B WIDTH=640 HEIGHT=496 CODEBASE=http://www.apple.com/qtactivex/qtplugin.cab>
<PARAM name=SRC VALUE=http://online.santarosa.edu/homepage/billstone/movie.mov>
<PARAM name=AUTOPLAY VALUE=false>
<EMBED SRC=http://online.santarosa.edu/homepage/billstone/movie.mov WIDTH=640 HEIGHT=496 AUTOPLAY=false>
</EMBED>
</OBJECT>

Optionally, you can utilize the parameter KIOSKMODE=true to prevent viewers from saving a local copy of the video file.

12. After entering and double-checking all parameters, click the "Confirm Editing Text" button.

13. Your audio or video file is now embedded and ready to be played from within your webpage.

Note to ProfCast users: The CATE Presentation module is designed so that if you use the usual "Edit Link" option to create a standard link to a .m4b file (a PowerPoint or Keynote file with synchronized audio track created with ProfCast), the system will automatically perform all these steps for you, embedding the ProfCast file directly into your webpage as if you had handcoded it yourself according to the instructions above.

Examples of audio and video files embedded in CATE pages

Other notes

If for some reason you prefer not to embed your multimedia file in your page, you can always make a plain old link to it. If you do so, students will be able to left-click on the link to open and play the file within the browser, and they can right-click to download the file to their local computer and deal with it there.

In all cases, to help your students deal with multimedia files, we recommend the following extra steps:

• On your section homepage, warn your students that multimedia files in the class will require a broadband connection, and users with dial-up might be unable to access class content.

• On your section homepage, alert your students that they should have QuickTime installed to ensure access to class content.

• On your section homepage, provide a link to the free QuickTime download page at Apple: http://www.apple.com/quicktime/download

• In each location where you embed a multimedia file, you should also include a simple link to your audio or video file for students who experience insurmountable difficulties handling it embedded within the page.

• For a suitably configured computer, these embedded QuickTime files should be completely satisfactory for all users. However, for maximum compatibility, you might also want to provide links to the same files in Real format and/or Windows Media format.

• Finally, it must be noted that no matter how carefully you follow all these instructions, inevitably some students will simply prove unable to access any multimedia files.

For further instructions or related information, check the Help Main Menu.

Distance Education office Santa Rosa Junior College, Santa Rosa, CA USA Last Modified: Tuesday, 12-Mar-2013 13:25:28 PDT	Email to CATE Webmaster