Producing Participatory Media
Week 3 - February 4


  • Integrating with a Browser
  • Layout and simple interactivity

  • Embedded QuickTime
    QuickTime players can be embedded in a webpage.

    There are many advantages to doing this:
  • Precise Layout Control and better user experience (no annoying ads and branding)
  • Integration with other web based components such as Java applets, images and text
  • Simple interactivity of your own design (through JavaScript or VBScript)

    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"
      <PARAM name="SRC" VALUE="">
      <PARAM name="AUTOPLAY" VALUE="true">
      <PARAM name="CONTROLLER" VALUE="false">
      <EMBED SRC="" WIDTH="160" HEIGHT="144" 
    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.

  • For more information:
    QuickTime ActiveX Plugin
    QuickTime Embed Tag Attributes

    Embedded RealPlayer
    As with QuickTime, Real Players can be embedded as well. Here is an example

    The code for doing this is as follows:
    <PARAM NAME="SRC" VALUE="embedded.rm">
    <EMBED SRC="embedded.rm" WIDTH=320 HEIGHT=240 NOJAVA=true CONTROLS=ImageWindow CONSOLE=one></EMBED
    Also, as with QuickTime there are two sets of tags, the "Object" and "Param" tags for IE and the "Embed" tag for Netscape compatible browsers.

    You will notice that this version doesn't have any controls. The means for adding controls to the Embedded RealPlayer is a bit more complicated than with QuickTime but also more flexible. There are a whole slew of options and controls available (See the links below for examples). Unfortunately to add controls to a RealPlayer you need to create another set of "Object" and "Embed" tags specific to the controls (along with the first set which define the video window).
    Here is the second set of tags enabling all of the controls:
    <PARAM NAME="SRC" VALUE="embedded.rm">
    <EMBED SRC="plugin.rpm" WIDTH=375 HEIGHT=100 NOJAVA=true CONTROLS=All CONSOLE=one>
    Here is what it looks like.

    For more information:
    RealNetworks: Web Page Embedding
    RealNetworks Production Guide: Chapter 20, Web Page Embedding

    Pop-up Windows

    Many sites that offer streaming media on the internet utilize an embedded player in a pop-up window. Here is a quick line of JavaScript that you can use to create your own pop-up window:

    <a href="javascript: var"realembedded_all.html", someWindow, 'toolbar=1,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=1,width=400,height=400');">Pop-Up</a>

    Here is what it will look like: Pop-Up

    For more information: Basic Popup Windows

    Embedded QuickTime and JavaScript
    Unfortunately, things are not well in the JavaScript and Plugin arena. Many browsers handle plugins differently and some don't expose them to scripting at all. This means that in order to control a plugin from JavaScript you have to include different code for different browsers.
    In any case, if you are interested in trying, checkout the following pages:
    QuickTime Javascript Support
    Javascript Support for Active X, Netscape 6 and Mozilla

    Embedded RealPlayer and JavaScript
    For more information:
    Embedded RealPlayer Functionality Guide
    Spicing-Up RealPlayer with JavaScript

    SMIL - Synchronized Multimedia Integration Language
    SMIL is an XML based markup language for creating streaming presentations that integrate several elements such as a slide show with audio or two simultaneous videos. I t offers some fairly powerful layout capabilities as well as synchronization and other time based elements. SMIL is a standard endorsed by the W3C and exists in a variety of players including both QuickTime and Real (with some support in Flash and Windows Media).

    The Basics
    Below is a the basic structure of a SMIL file.
      layout tags -->
                <!-- body tags 

    SMIL single tags always end with a "/" like XML (which is what SMIL is).

    Example File

    Example File

    Example File

    Images, Audio and Video
    <audio ...> <video ...>
    Example File
    Another Example

    SMIL 2.0
    Namespaces, Enhanced Functionality, Profiles

    QuickTime Example:
    <smil xmlns:qt="" qt:autoplay="true">
    <!-- XML Namespace --> <!-- QT SML Extension: autoplay -->
    <root-layout width="600" height="240" background-color="black" />
    <region id="video_region" left="0" top="0" width="320" height="240" z-index="1" />
    <region id="image_region" left="300" top="0" width="300" height="240" z-index="2" />
    <img src="" alt="An Image" region="image_region" dur="10s" />
    <img src="" alt="Another Image" region="image_region" dur="10s" />
    <video src="" region="video_region" dur="20s">
    <anchor show="new" href="" /> <!-- Shows in the Browser -->
    This Example

    Real Namespace Specifications:

    <smil xmlns=""

    Saving as a QT Movie
    The first eight characters of the file must be "SMILtext" in order for QuickTime to successfully import a SMIL file and turn it into a movie file.
    Previous to name change
    Following name change

    QT Text Tracks
    While you can include plain text in QT SMIL presentations you can't do much about how that text looks. In order to have more control over how and when the text is displayed you should use a QuickTime Text Track.

    The easiest way to create a QT Text file is to create a plain text document in your favorite text editor and then to import it into QuickTime Pro. You then export it using the Export command and choosing "Text to Text". At this point you can edit the descriptors to change the font, color, timing and more. See below for a link to Apple's list of descriptors.

    Here is the content of a text file that I created:
    Hi My Name is Shawn
    This Class is called Producing Participatory Media
    It is a **FUN** class!!! ;-)
    Download this example

    Following exporting it it became:
    {QTtext}{font:Geneva}{plain}{size:12}{textColor: 65535, 65535, 65535}{backColor: 0, 0, 0}{justify:center}{timeScale:600}{width:160}{height:48}{timeStamps:absolute}{language:0}{textEncoding:0}
    {textBox: 0, 0, 50, 160}Hi My Name is Shawn
    {textBox: 0, 0, 50, 160}This Class is called Producing Participatory Media
    {textBox: 0, 0, 50, 160}It is a **FUN** class!!! ;-)
    Download this example

    Of course, you don't need to use QT Pro to create a file such as this, you can simply follow the same format and create this file in any text editor.
    Here is the modified version that I created:
    {QTtext}{font:New York}{Bold}{size:14}{textColor: 0, 65535, 65535}{backColor: 0, 65535, 0}{justify:center}{timeScale:600}{width:300}{height:120}{timeStamps:absolute}{language:0}{textEncoding:0}[00:00:00.000]{textBox: 0, 0, 50, 160}Hi My Name is Shawn[00:00:01.000]
    {textBox: 0, 0, 50, 160}This Class is called Producing Participatory Media
    {textBox: 0, 0, 50, 160}It is a **FUN** class!!! ;-)

    Download this example

    Putting it all together

    As illustrated in the above diagram, SMIL which contains pointers to media (audio, video, text, images) should be uploaded to your webserver along with your images and video and further more can be embedded just like a QuickTime movie or a RealMedia document into a webpage. You use the same embedded player HTML code as described above for putting a movie in your page. Instead of creating a link directly to a movie (possibly using a QTML or RAM file) you create a link to your SMIL document (also possibly using a QTML or RAM file for compatibility purposes).

    For more information:
    SMIL 1.0 Spec
    QuickTime and SMIL
    QT Text Track Descriptors
    QuickTime and SMIL (in depth)
    QuickTime Text Tracks Tutorial
    SMIL Authoring (notes from a course at Michigan State, very good)
    Captioning for QuickTime
    The SMIL Tutorial
    RealNetworks Production Guide: SMIL Basics
    SMIL: Multimedia for the Masses
    Layouts in SMIL
    s o u n d s c r e e n Great information concerning many aspects of QuickTime delivery

    Extra Credit: Skins
    Both QuickTime and Real allow the skinning of their players. While we aren't going to go over how to do it in class it might be something that you are interested in.

    QuickTime Media Skins:
    QuickTime Media Skins are in actuality part of a movie. They automatically download and play along with a presentation and can be used to enhance the functionality or information display of a piece of media.
    QuickTime Media Skins
    How to create QuickTime Media Skins
    Using eZediaQTI with QuickTime Media Skins
    Mastering QuickTime Media Skins

    QuickTime Media Skins Examples: (open in QuickTime Player)
    An Example
    Another Example
    A third example

    RealOne Skins
    RealOne Skins are more for the hobbyest and aren't automatically instantiated as a presentation. In this way they are more decoratative and less about adding functionality to a player's interface.
    RealOne Skins Toolkit
    Creating Custom Skins For RealOne

    RealOne Skins Examples