Introduction To Computational Media on the Web (ICM-W) : Week 6

Using Audio/Video on the Web

The World Wide Web has come a long way since people first started putting moving images and audio on it in the mid 1990's. Early online video experiments were often in the form of Animated GIFs. With QuickTime and RealPlayer things got a bit more interesting..

I take it you are familiar with what happened next..

Embedded QuickTime

QuickTime players can be embedded in a webpage.

To Simply Embed a QuickTime player in a page utilize the following HTML:

  <OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" WIDTH="160"HEIGHT="144" CODEBASE="">
  <PARAM name="SRC" VALUE="">
  <PARAM name="AUTOPLAY" VALUE="true">
  <PARAM name="CONTROLLER" VALUE="false">
You will notice that there are really two things going on here. The first is the "Object" tag and associated "Param" tags. These are included to support Internet Explorer and other browsers that support ActiveX controls. The second is the "Embed" tag. This is included to support browsers that utilize the standard Netscape plugin architecture. In order for your embedded player support the range of browsers available you need to include both. Also, both tags should include the same set of information. For instance, if you are going to change the height of the plugin you should change it in both the "Object" tag and in the "Embed" tag.

There are quite a few tags that you may utilize when you use a QuickTime embedded player. A full list is available from Apple by following the For more information: QuickTime Embed Tag Attributes. Some of the more interesting ones are: AUTOPLAY, CONTROLLER and HIDDEN.
  • If I wanted to make sure the movie plays as soon as it is able, I would set the AUTOPLAY to true.
  • If I didn't want a controller to be available on the page I would set CONTROLLER to false (better make sure that AUTOPLAY is true in this case). When you have a controller you should increase the size of the movie by 17 pixels in height.
  • I could even hide the movie completely by specifing HIDDEN which is perhaps good for audio streams or ambient music. Here is an example of a movie without a controller.
  • JavaScript + QuickTime

    Things get more interesting when you think about making an audio or video file interactive:

    Setting the "ID" (IE) and "name" along with EnableJavaScript="true" (NS/other) attribute(s) allows us get access to the video through JavaScript. You should set the "name" in the embed tag and the id in the object tag to the same value.

      <OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" WIDTH="160"HEIGHT="144" CODEBASE="" id="amovie">
      <PARAM name="SRC" VALUE="">
      <PARAM name="AUTOPLAY" VALUE="false">
      <PARAM name="CONTROLLER" VALUE="true">
      <EMBED SRC="" WIDTH="160" HEIGHT="144" AUTOPLAY="false" CONTROLLER="true" PLUGINSPAGE="" name="amovie" EnableJavaScript="true"></EMBED>
    (Careful when using this code. Make sure that stray line breaks don't mess things up.)

    document.amoviea.SetTime(500) - 500 is the frame not the timecode

    For More Commands, See: JavaScript Scripting Guide for QuickTime

    What can we do with this?

    How about 2 videos at once or how about creating a system where you can associate comments or tags at a specific spot in the video?

    My Example (Don't forget to view source)


    Eolas is a company that has a patent on technology related to embedding objects in web pages. Microsoft, after losing a patent fight has put in place a work around which requires the user to click to activate the object/plugin. The other option is to utilize a script to dynamically include the plugin code instead of it being in the original HTML.

    It is a bit of a pain to dynamically write the HTML for QuickTime (and other plugins) but there exist several JavaScript libraries that exist to make it easier as well as offer other benefits along the way.

    Geoff Stearns' QTObject embed is one of the most elegant and easiest to use.

    Here is an example:
    				<!-- QTObject embed by Geoff Stearns -->
    				<script type="text/javascript" src=""></script>
    				<div id="video">
    					<script type="text/javascript">		
    						// create the qtobject and write it to the page, this includes plugin detection
    						// be sure to add 15px to the height to allow for the controls
    						var myQTObject = new QTObject("", "mymovie", "320", "255");
    						myQTObject.addParam("href", "");
    						myQTObject.addParam("target", "myself");
    						myQTObject.addParam("controller", "false");
    Here is what the above yields:

    One of the really nice things about using this script is that the video doesn't automatically load if you use a "placeholder" image. This way many video files can be included on the page without affecting the load time.

    The "mymovie" parameter is both the ID and Name attribute that can be used in JavaScript as explained above.

    More examples here: What's Next?

    HTML 5 Video Tag

    Currently the W3C is working on the specification for HTML 5. Included is a new tag called "video" (there is also one called "audio"). This tag would make video playback universal on browsers but doesn't include support for a specific format due to the fact that there doesn't exist a non-patent encumbered video codec that can be used (though it can be argued that Ogg Theora is such).

    HTML 5 Spec HTML 5 Video Tag
    HTML 5 Video Tag Test

    Fortunately, in the case of the "audio" tag, they have specified that browsers must support the WAVE format with PCM encoded audio (basically uncompressed audio). HTML 5 Audio Tag
    HTML 5 Audio Tag Test