EMBEDDING MEDIA IN YOUR WEBPAGES


by Dr. Elizabeth Hanson-Smith

Embedded movies
Embedded sound files

Back to Tips and Tools
Back to Dr. Hanson-Smith's homepage






Adding embedded QuickTime movies with controllers to your Webpage




Microsoft Internet Explorer no longer readily supports QuickTime movies, so you will need to do a little coding to get most browsers to recognize your movie files.  You can also use a javascript for this task, but this code seems to work:


<OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" WIDTH="160"HEIGHT="144"
CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab">
<PARAM name="SRC" VALUE="sample.mov">
<PARAM name="AUTOPLAY" VALUE="false">
<PARAM name="CONTROLLER" VALUE="true">
<EMBED SRC="sample.mov" WIDTH="322" HEIGHT="256" AUTOPLAY="false" CONTROLLER="true">
PLUGINSPAGE="http://www.apple.com/quicktime/download/">
</EMBED>
</OBJECT>





Substitute your own file name for sample.mov above.

Also make sure your height value is set for 16 pixels more than your actual movie's size to allow room for the controller.

For a fuller explanation of the code, see Apple's page:

 http://www.apple.com/quicktime/tutorials/embed2.html.


 





Here is another example, this time using RealPlayer, another popular free resource for playing media on the Internet, and a movie located on a different server from your own:



<embed src="http://www.cit.cornell.edu/atc/itsupport/fac_profiles.ram"
 type="audio/x-pn-realaudio-plugin" controls="ImageWindow,ControlPanel"
 width="200" height="176">

Depending on whether you set your preferences to streaming or download, this image will open the Player and the movie, and/or show the Player to one side of the screen [sorry--haven't mastered this one yet!]. A clickable image from the source Webpage at Cornell University has been placed on this page to show the reader where to click for the movie.

view of Cornell University bell tower







This example is for Windows Media Player, which supports the .wmv files.

< embed src="http://www.danielcraig.com/call/summer2005/tutorials/word-reviewing-feature.wmv">
This may take a little while to download and open up. I have placed a clickable image with a link to the movie on Craig's server.  This Player will not pop up inside your browser, but floats on your screen.
Screenshot of tutorial by Daniel Craig





Adding embedded sounds with controllers to your Webpage


The codes for sound control are not as simple as for video files, because there is no one generally agreed upon standard. Some commands and some file types are not recognized by some browsers. (Thanks again, Bill...) It helps if you know what browsers your students are using and can get the preferences set the same. If they are not on your own site, you may need to do some troubleshooting.

These are the simplest options I could find for embedding controllers. If your preferred player can't handle mp3 or midi files, you may get an error message.

CLICK LINK TO PLAY 
Clicking this link opens a blank window with a controller.
   When the users finish, they click BACK.

<A HREF="rising_sun.mp3">
Play</A>

(You could also use an image to link to the HREF address, but you may find users also need directions.)

<A HREF="rising_sun.mp3"><img align="middle" border="0" src="sunrise.jpg">
</A>
BUTTON CONTROL
Users click a button to open their own browser's preferred player. May need some directions for downloading players such as Real Audio.
<FORM METHOD="LINK" ACTION="rising_sun.mp3"><INPUT TYPE="submit" VALUE="Play Audio"></FORM>

CONSOLE
The default opens a simple control panel



<EMBED ALIGN="CENTER" SRC="http://www.mountaindragon.com/html/cut1.mid" HEIGHT="60" WIDTH="145" AUTOSTART="FALSE" VOLUME="100%"></EMBED>

PLAYBUTTON
An abbreviated version with no volume control


<EMBED ALIGN="CENTER" SRC="http://www.mountaindragon.com/html/cut1.mid" HEIGHT="32" WIDTH="32" AUTOSTART="FALSE" CONTROLS=PLAYBUTTON VOLUME="100%" </EMBED>
AUTOSTART & LOOP
Autostart begins play when the page opens.
I DON'T recommend this option, because I find it annoying (and I didn't use it in this page.)
If you do use it, be sure to set a finite loop.
(Nothing shows on your page.)

(Don't drive your users nuts--think how many times they will have to listen to it if they use your page often!)
<EMBED SRC="sample.mp3" HIDDEN="TRUE" AUTOSTART="TRUE"  LOOP="3" DELAY="3"></EMBED>


Notice that volume at 50% will be half of what users' settings are on their own computer. If you leave out this paramenter, the sound will play at the user's current setting. If you set it too low, nothing may be heard at all.

For more on sound controllers see
     http://www.cit.cornell.edu/atc/itsupport/streamingembed.shtml
     http://www.mountaindragon.com/html/sound.htm

     http://www.htmlcodetutorial.com/embeddedobjects/_EMBED_CONTROLS.html

For a great tutorial on using QuickTime for movies see Claire Bradin Siskin's page:
     http://www.edvista.com/claire/qt/embedtags/index.html

VideoPaper Builder creates documents with embedded media controls:
     http://vpb.concord.org/info/

SnagIt is relatively inexpensive software to create .avi files of mouse and desktop actions on your monitor:
     http://techsmith.com


Back to top


Return  to Computers for Education homepage
Author and editor of works for the technology- using teacher Moderator of interactive groups and courses online Creator of software  for the computer-using teacher
Contact me for further information about online and real time consulting
Tools and resources for the TELL educator
Virtual office archives--meet here for live chat
(log in and type /enter Comp_for_Ed)
Photos and video from my family

copyright Dr. Elizabeth Hanson-Smith, Computers for Education


1

1