Interactive Movies: Using SMIL in QuickTime

< Previous PageNext Page >

Hide TOC

Using SMIL in QuickTime

SMIL presentations may be used to enhance QuickTime playback. You can create standard SMIL documents and play them from the desktop or in a browser as if they were QuickTime movies. There are also QuickTime-specific extensions to SMIL that you can use to enhance your presentations.

In this section:

Creating QuickTime-Friendly SMIL Documents
Examples
Special Media Types
QuickTime SMIL Extensions
New SMIL Extensions Added in QuickTime

Creating QuickTime-Friendly SMIL Documents

For QuickTime to play a SMIL presentation, the presentation must be made up of media elements that QuickTime can play individually. This includes QuickTime movies, real-time streams in QuickTime format, AIFF and MP3 sound files, JPEG and GIF images, FLIC animations, text files, and MIDI music files.

If you can use a URL in the QTSRC parameter of an <EMBED> tag, and the QuickTime plug-in can play it successfully, you can use that URL as a media element in a SMIL document for QuickTime.

QuickTime doesn’t currently support the whole SMIL specification. You can use all the SMIL tags and parameters described in the tutorial, but if you’re working from the W3C specification, note the following exceptions:

Regions can’t have scroll bars (don’t use fit="scroll" in the <region> tag).
Only the basic layout is supported (no CSS-based layout).
The <switch> tag can’t be used to specify a root layout from a list.
Hyperlinks can’t be used to pause the current SMIL presentation, load another one, then resume the current presentation (don’t use show="pause" in the <a> tag).
You can’t jump to a named point in another SMIL presentation—don’t use links of the form <a href="fname.smi#anchor" >.

Examples

A common use of SMIL is to specify an advertisement that should play when the viewer requests a live stream. The following is a simple SMIL document that does just that. It defines a display area and a background color, then specifies two display regions—one for the ad and one for the live stream. It plays an ad—a QuickTime movie from a CD—that includes a click-through link to www.apple.com. When the ad is done, the SMIL document opens a live stream, in this case the BBC world news.

<smil>

    <head>

    <layout>

    <root-layout id="rl" width="320" height="240"

        background-color="red"/>

    <region id="ad" width="200" height="240" left="60" top="0" />

    <region id="bbc" width="100%" height="100%" fit="fill" />

    </layout>

    </head>

    <body>

    <seq>

        <!-- ad -->

        <a href="http://www.apple.com"show="new"> <!-- opens a new browser                                         window if the ad is clicked on -->

            <video src="sample.mov" region="ad"/>

        </a>

        <!-- live stream -->

        <video src="rtsp://a628.q.kamai.net/7/628/52/935780134/

            qtv.akamai.com/bbc/bbc100" region="bbc" />

    </seq>

    </body>

</smil>

Note that the ad is centered by specifying a top and left offset for the ad region. Note also that you must specify both top and left as a pair, even though the top offset is 0. The live stream’s region is set to 100% of the available display area, and the stream’s visual area is scaled up to fill the region by specifying fit="fill".

As another example, here’s a way to create a narrated slide show using SMIL:

Step through your slides using any tool, such as PowerPoint, JPEGView, or QuickTime Player (Present Movie—Slide Show mode).
Record a narration as you go, using recording software or recording to tape and capturing to disk later.
Open your narration in QuickTime Player, choose Get Info, and display the movie time as you listen to your narration.
Write down the appropriate time to begin displaying each slide.

Write a SMIL document similar to the one below, substituting the URLs of your slides and narration, and changing the slide durations as appropriate.

<smil>

    <head>

    <layout>

        <root-layout id="rl" width="320" height="240"

            background-color="black" />

        <region id="slides" width="320" height="240" />

    </layout>

    </head>

    <body>

    <par>

    <audio src="narration.aif" />

    <seq>

        <img src="slide1.jpg" region="slides" dur="5S" />

        <img src="slide2.jpg" region="slides" dur="15S" />

        <img src="slide3.jpg" region="slides" dur="10S" />

    </seq>

    </par>

    </body>

</smil>

This creates a slide show that starts the audio narration and the first slide in parallel, then displays the slides in sequence, giving each slide the specified duration.

Special Media Types

Text files, QuickTime VR panoramas and object movies, and HTML pages can all be specified as media elements in SMIL documents for QuickTime, but they deserve special mention.

Text

You normally specify a text file as a media element using the <text> tag: <text src="http://my.server.com/some.txt" region="r1" dur="5" />

Other SMIL players may present the whole text file as a block of text. QuickTime displays the text as it would any text file imported into QuickTime Player. You can see how the text will be displayed by importing it into QuickTime Player using the default import settings.

To modify the way the text is presented, import the text into QuickTime Player using any settings you like, export it as Text with Descriptors, and edit the descriptors in the exported file as needed. You can also generate a text file that includes QuickTime text descriptor tags using a CGI script or other software.

You can use a text file with QuickTime text descriptors as a SMIL media element when playing the SMIL file with QuickTime. All the descriptors are supported, including scrolling, keyed text, and hyperlinks.

SMIL considers text as not having an inherent duration, but importing a text file into QuickTime creates a movie with a duration of 2 seconds for each paragraph of text.

If you specify a duration for a text element that’s less than the duration of the text movie that Quicktime creates, the display of the text movie is truncated.

You can get around this by specifying the text file using the <video> tag: <video src="http://www.server.com/some.txt" region="aregion" />

This causes the text to be displayed for the duration of the text movie that QuickTime creates.

VR

Specify a QuickTime VR panorama or object movie using the <video> tag:

<video src="http://www.myserver.com/vr.mov" region="aregion" />

You can use VR panoramas and object movies, including multinode panoramas, and VR movies that have been enhanced using wired sprites.

However, VR movies inside SMIL presentations don’t have a VR controller attached. Viewers can navigate the VR movie using the mouse to drag left, right, up, and down, and to click from node to node, but they can’t zoom in or zoom out. You can add zoom controls by adding a wired sprite controller to the VR movie.

HTML

You can’t display HTML pages inside QuickTime Player or the QuickTime plug-in. It’s possible to use SMIL to display media from a Web page in QuickTime Player or the QuickTime plug-in, however. This capability is currently very limited, but it may be sufficient for your needs.

Suppose you want QuickTime to display an animated GIF, for example, but you don’t have a URL for the GIF itself, just the URL of a Web page that uses the GIF as a banner ad.

Note: This is fairly common if you have a script that generates Web pages and inserts banner ads according to an algorithm, and you want to take advantage of this script to put the same ad in a SMIL presentation.

Use the SMIL <image> tag to set up the presentation for the GIF, but use the URL of the Web page that contains the GIF in the SRC parameter. For this to work, you need to explicitly set the MIME type to HTML in the element tag: type="text/x-html-insertion"

The SMIL element looks like this:

<image src="http://www.myserver.com/index.html"

        type="text/x-html-insertion" region="aregion" dur="time" />

QuickTime opens the HTML document specified in the URL and scan it for a playable media element specified by a SRC parameter. QuickTime follows a particular logic in scanning a document for a playable element:

First, it looks for an <A HREF> tag that uses an image for an anchor, such as <A HREF="www.sponsor.com"><IMG SRC="adbanner.gif"></A>
If no <A HREF> tag with an image source is found, QuickTime looks for an <EMBED> tag with a playable source, such as <EMBED SRC="playable.mov">
If no <EMBED> tag with a playable source is found, QuickTime looks for an <IMG> tag, such as <IMG SRC="displaythis.jpg">

QuickTime takes the first source that it finds using this logic and attempts to use it as the media element specified in the SMIL document. For this to work, the first source QuickTime finds needs to match the specified element type, such as audio, video, or image.

Here’s an example of a Web page with a banner ad, and a SMIL document that uses the banner ad from the Web page as a clickable link over a streaming movie:

<HTML>

    <HEAD><TITLE>Welcome to XYZ Corp</TITLE></HEAD>

    <BODY>

        <A HREF="sponsor.htm"><IMG SRC="adbanner.gif"></A>

...

    </BODY>

</HTML>

<smil>

    <head>

        <layout>

            <root-layout height="290" width="512"

                background-color="black" />

            <region id="ad" height="50" width="512" />

            <region id="movie" height="240" width="320"

                top="50" left="98" />

        </layout>

    </head>

    <body>

        <par>

        <a href="sponsor.htm" show="new">

            <image src="welcometoxyz.html"

                type="text/x-html-insertion"

                region="ad" end="id(x)(end)" />

        </a>

        <video src="rtsp://server/stream.mov"

            region="movie" id="x" />

        </par>

    </body>

</smil>

QuickTime SMIL Extensions

SMIL is an extensible standard, and QuickTime provides several SMIL extensions. This allows you to add QuickTime-specific attributes to your SMIL presentation, such as autoplay="true".

To use QuickTime extensions in your SMIL document, include the xmlns: parameter and the URL of the QuickTime extensions as part of the initial <smil> tag:

<smil

xmlns:qt="http://www.apple.com/quicktime/resources/smilextensions">

QuickTime doesn’t actually access the URL; it’s used only to uniquely identify the QuickTime SMIL extensions.

You can include QuickTime extensions within the <smil> tag along with the URL. For example, to create a SMIL presentation that starts automatically:

<smil

xmlns:qt="http://www.apple.com/quicktime/resources/smilextensions"

qt:autoplay="true">

In the examples that follow, the xmlns: parameter and the URL have been omitted for readability, but they are a required part of the <smil> tag when any QuickTime extensions are used in a SMIL presentation. These are the current QuickTime SMIL extensions:

autoplay Specifies whether the presentation should play automatically. Legal values are true or false. The default is false.

Example: <smil qt:autoplay="true">

next Specifies a presentation to play when this presentation finishes. Legal value is the URL of something QuickTime can play: a media file, a movie, a stream, or a SMIL presentation. This is similar to the QuickTime plug-in’s QTNEXT parameter.

Example: <smil qt:next="nextpresentation.smi">

time-slider Specifies whether the movie controller should include a Time slider. During a SMIL presentation, QuickTime dynamically loads media elements as required, so the known duration of the overall presentation can change as a movie is played or navigated. When the known duration changes, the scale of the Time slider changes to reflect that. This can be confusing to the viewer. Because of this, QuickTime movies created from SMIL documents do not normally display a Time slider. Legal values are true and false. Default is false.

Example: <smil qt:time-slider="true">

Note: If you want to import a SMIL presentation into QuickTime and edit it using QuickTime Player’s editing features—to add a chapter list for example—you must set time-slider="true". QuickTime Player’s editing features rely on the Time slider.

immediate-instantiation When used in the <smil> tag, specifies whether all the media elements in the presentation should be downloaded (or streamed) immediately, or whether this should be deferred until each element is about to be played. Legal values are true and false. Default is false. Opening all the media elements at the beginning of the presentation can take considerable time and memory, so we recommend that it be done only for simple presentations with a few small media elements. When used in an element tag, specifies that this particular element should be downloaded or streamed as soon as the presentation is opened. You might use this to preload an element to be sure it is already in memory when it needs to play.

Example: <smil qt:immediate-instantiation="true">

Example: <imgsrc="bgimg.png"qt:immediate-instantiation="true"/>

composite-mode Specifies the graphics mode of a media element. This is used to create partial or complete transparency. Possible modes are
- copy none direct These modes all specify no transparency, which is the default for most image formats.
- blend;percent Specifies a blend between the image and the background, with a required percent integer value (for example, 50%) specifying the blend weight—0% means complete transparency, 100% complete opacity.
- transparent-color;color Specifies that all pixels of a particular color within the image should be treated as transparent. It accepts a second parameter, color, that specifies the color to be rendered as transparent. The color parameter may be any valid color specification supported by Cascading Style Sheets Level 2 4.
- alpha straight-alpha premultiplied-white-alpha premultiplied-black-alpha Specify that the image has an internal alpha channel that should be used when compositing. The alpha and straight-alpha modes refer to a separate alpha component; the premultiplied modes refer to an image that has been premultiplied with the alpha against a white or black background, respectively.
- straight-alpha-blend;percent Specifies that the image has an internal alpha channel as a separate component, and that an additional level of transparency should be applied to the whole image.

Example: <imgsrc="test.png"qt:composite-mode="alpha" />

bitrate Specifies the bandwidth a media object needs in order to play back in real time. This is used to give QuickTime enough information to decide how far in advance to begin loading a media element to provide seamless playback. Possible values are positive integers, in bits-per-second.

Example: <videosrc="stream56k.mov"qt:bitrate="56000" />

Important: Don’t confuse qt:bitrate with system-bitrate. Use system-bitrate to select a media element based on the user’s connection speed. Use qt:bitrate to help QuickTime determine when to start downloading a media element.

system-mime-type-supported Specifies the MIME type that needs to be supported in order to play a media element. This is normally used in conjunction with the <switch> tag to allow the player software to choose a media element that it can handle. Possible values are character strings matching a valid MIME type.

Example:

<switch>

<imgsrc="qt.mov"

        qt:system-mime-type-supported="video/quicktime"/>

<imgsrc="someotherformat.suffix"

qt:system-mime-type-supported= "other/mime-type"/>

</switch>

chapter-mode Specifies whether the Time slider represents the duration of the whole presentation or the duration of the current chapter. Legal values are all and clip. Specify all for the whole presentation, clip for chapter-at-a-time.

Example: <smil qt:chapter-mode="clip"/>

chapter Specifies a chapter name for a media element. Valid values are any character string. Use this in conjunction with the <a> tag and a URL of the form href="#chapname" to create clickable links to named points in the presentation.

Example:

<videosrc="some.mov"qt:chapter="chap1" region="r1" />

...

<a href="#chap1" show="replace" >

<img src="BackToChap1.gif" region="r2" dur="5:00" />

</a>

In the example above, clicking in region r2 while BackToChap1.gif is displayed rewinds the presentation to chap1, causing some.mov to restart.

target Specifies a target for a presentation specified by the href parameter in the anchor tag. Possible targets are an existing browser window, a browser frame, or quicktimeplayer. If the target string is none of these, a new browser window is created. Used in conjunction with show="new".

Example:

<ahref="http://www.server.com/another.smi"show="new"

qt:target="quicktimeplayer">

<img src="OpenNewSMIL.gif" region="r2" dur="5:00" />

</a>

New SMIL Extensions Added in QuickTime

The current release of QuickTime includes the addition of several new SMIL extensions.

The SMIL extension, "qt:preroll", accepts an integer representing the number of seconds to open and prepare to play an embedded movie. The attribute can be added to any media object; the default remains 15 seconds.

The begin-clip and end-clip attributes are now supported for media elements.

Another SMIL extension allows fullscreen playback by adding "qt:fullscreen" to the SMIL element. "qt:fullscreen" can be set in the SMIL header; it accepts one of the following attributes:

qt:fullscreen="fullscreen_false"

qt:fullscreen="fullscreen_normal"

qt:fullscreen="fullscreen_double"

qt:fullscreen="fullscreen_half"

qt:fullscreen="fullscreen_full"

qt:fullscreen="fullscreen_current"

Relative URLs work with qtnext user data and with the "qt:next" attribute of SMIL documents. Therefore, the following works:

<smil xmlns:qt="http://www.mywebsite.com/quicktime/resources/smilextensions" qt:next="in_the_same_directory_as_this_document.mov"> . . . </smil>

< Previous PageNext Page >

Hide TOC

Last updated: 2002-10-01

Did this document help you?
Yes: Tell us what works for you. It’s good, but: Report typos, inaccuracies, and so forth. It wasn’t helpful: Tell us what would have helped.




	Get information on Apple products. Visit the Apple Store online or at retail locations. 1-800-MY-APPLE Copyright © 2007 Apple Inc. All rights reserved. \| Terms of use \| Privacy Notice