When your multimedia presentation contains multiple clips—such as a slideshow and a video played together—you use Synchronized Multimedia Integration Language (SMIL) to coordinate the parts. Pronounced "smile," SMIL uses a simple but powerful mark-up language for specifying how and when clips play. After writing the SMIL file, you put it on RealServer and link your Web page to it as described in Chapter 11.
 |
Tip |
|---|
| If you have just one clip in your presentation, such as a single RealVideo clip, you don't need to create a SMIL file. Just link your Web page to the clip as explained in Chapter 11. |
 |
Additional Information |
|---|
| Once you are familiar with SMIL, refer to "Appendix D: SMIL Quick Reference". |
You can create a SMIL file (extension .smil) with any text editor or word processor that can save output as plain text. If you are familiar with HTML mark-up, you will pick up SMIL quickly. In its simplest form, a SMIL file lists multiple clips played in sequence:
<smil>
<body>
<audio src="rtsp://realserver.example.com/one.rm"/>
<audio src="rtsp://realserver.example.com/two.rm"/>
<audio src="rtsp://realserver.example.com/three.rm"/>
</body>
</smil>
SMIL has many similarities to HTML, but also some important differences. When you create your SMIL file, keep the following general rules in mind.
The SMIL mark-up must start with a <smil> tag and end with the </smil> closing tag. All other mark-up appears between these two tags:
<smil>
...all other SMIL mark-up...</smil>
A SMIL file can include an optional header section defined by <head> and </head> tags. It requires a body section defined by <body> and </body> tags:
<smil>
<head>
...optional section with all header mark-up...</head>
<body>
...required section with all body mark-up...</body>
</smil>
The header section is used to specify presentation information, as noted in "Adding Presentation Information", and to define clip layout, as described in "Laying Out Multiple Clips".
SMIL tags and attributes must be lowercase.
A tag that does not have a corresponding end tag (for example, the <smil> tag has the end tag </smil>), must close with a forward slash. For example:
<audio src="first.rm"/>
Attribute values, such as "first.rm" shown above, must be enclosed in double quotation marks. File names in SMIL must reflect the file name exactly as it appears on the server. They can use upper, lower, or mixed case.
Save your SMIL file with the extension .smi or .smil. The latter extension (.smil) is preferred to avoid possible conflict with other files. Do not include spaces in the file name. For example, you can have the file my_presentation.smil but not the file my presentation.smil.
You need to use codes to add quotation marks, apostrophes, ampersands, or angle brackets to content in a SMIL header, such as a presentation title. See "Using Coded Characters".
As in HTML, the SMIL comment tag starts with <!-- and ends with -->. The ending does not include a forward slash:
<!-- This is a comment -->
Although examples in this chapter indent SMIL tags to various levels to illustrate the SMIL structure, indentation is not required. Indenting your SMIL files like the examples shown below will help you keep track of the SMIL functions, though.
To add a clip to the presentation, you include in the SMIL body section a clip source tag that describes the clip type and location:
<audio src="rtsp://realserver.example.com:554/audio/first.rm"/>
There are several clip source tags, as described in the following table.
| Clip Tag | Used For |
|---|---|
animation |
Animation clips such as Shockwave Flash (.swf). |
audio |
Audio clips such as RealAudio (.rm). |
img |
JPEG (.jpg), GIF images (.gif), or PNG images (.png). See also "Defining Image Options". |
ref |
Any clip type not covered by other attributes, such as a RealPix file (.rp). |
text |
Static text clips (.txt). |
textstream |
Streaming RealText clips (.rt). |
video |
Video or other clips that display continuous motion, such as RealVideo (.rm). |
|
|
Additional Information |
|---|
| For information on supported streaming formats, see "Choosing Media to Stream". |
The clip source tag you use to specify a certain clip does not affect playback because RealPlayer determines the clip type through other means. Specifying a text clip with the <audio.../> tag, for example, does not prevent RealPlayer from determining that it's a text clip. Although using the different clip tags helps you keep track of the clip types, you could specify all clips with <ref.../> tags, for example.
Within each clip source tag, a mandatory src attribute lists the clip location. How you specify this location depends on whether you will stream the presentation with RealServer, download the clip from a Web server, or play clips back from a local computer.
When a RealSystem presentation streams over a network, the clips reside on RealServer. Each source clip's src attribute gives the clip's URL:
<audio src="rtsp://realserver.example.com:554/audio/first.rm"/>
The following table explains the URL components in the example above. Contact your RealServer administrator to get the RealServer address, RTSP port, and directory structure.
If your presentation includes many clips that are on the same server, you can make each URL relative to a base target that you define in the header:
<head>
<meta name="base"content="rtsp://realserver.example.com/"/></head>
<body>
<audio src="audio/first.rm"/>
<audio src="audio/second.rm"/>
<audio src="rtsp://realserver.real.com/audio/third.rm"/>
</body>
Because the third clip uses a full URL, the base target is ignored. For the first two clips, however, the src values are appended to the base target, effectively giving the clips these URLs:
rtsp://realserver.example.com/audio/first.rm
rtsp://realserver.example.com/audio/second.rm
If no base target is given, RealPlayer assumes that the clip paths are relative to the location of the SMIL file. In the example above, therefore, you could leave the base target out if the SMIL file itself resides in a directory that contains the audio subdirectory that in turn holds the RealAudio clips. RealPlayer requests the clips with the same protocol it used to request the SMIL file.
To use a clip hosted on a Web server, use a standard HTTP URL such as the following in a clip source tag:
<img src="http://www.example.com/images/logo.gif"/>
URLs to clips on a Web server can also be relative to a base target as described above. Keep in mind that although a Web server can host any clip, a Web server cannot perform all the functions of RealServer.
|
|
Additional Information |
|---|
| See "Hosting a Presentation on a Server" and "Limitations on Web Server Playback". |
If your presentation clips will reside on the user's local computer (such as a multimedia tutorial included with a software application, for example), you include the SMIL file locally as well. The src attributes in the SMIL file list presentation clips in this format:
src="audio/first.rm"
This example is a local, relative link to a clip that resides one level below the SMIL file in the audio directory. For local access, you typically want to use relative links because you cannot be sure where users will place clips on their machines.
Alternately, you can use absolute, local links to specify exact locations. The syntax for absolute links is the same as with HTML. It varies with operating systems, however, and you should be familiar with the directory syntax for the system you're using. For example, the following absolute link syntax works for Windows machines, but not UNIX or Macintosh:
src="file://c:\audio\first.rm"
 |
Warning |
|---|
| Microsoft Internet Explorer 3.0 tries to display local SMIL files as HTML. To support this browser, launch the presentation through a Ram file as described in "Creating a Ram File Manually". |
With the SMIL <seq> and <par> tags, you can create groups that structure your presentation. The following sections explain how to play clips in sequence or parallel, as well as how to repeat groups or clips within groups.
Use the <seq> tag to play clips in sequence. In the following example, the second clip begins when the first clip finishes.
<seq>
<audio src="audio/newsong.rm"/>
<audio src="audio/oldsong.rm"/>
</seq>
If your presentation included just the clips above, you wouldn't need to use the <seq> tag. You could simply list the clips in order and RealPlayer would play them in sequence. The <seq> tag is most commonly combined with <par> to create combinations of sequential and parallel clips.
You can play two or more clips at the same time through the <par> tag. For example, the following combines a RealVideo clip with a RealText clip:
<par>
<audio src="music/newsong.rm"/>
<textstream src="lyrics/newsong.rt"/>
</par>
When you play clips in parallel, be sure that they do not exceed the presentation bandwidth as described in "Choosing a Target Bandwidth". When RealServer streams parallel groups, it ensures that the clips stay synchronized. If some video frames don't arrive, for example, RealServer either drops those frames or halts playback until the frames arrive.
|
|
Additional Information |
|---|
| When multiple visual clips play in parallel, you need to define each clip's playback region. For more information, see "Laying Out Multiple Clips". |
By default, a <par> group ends once all clips finish playing back. You can modify this with an end time as described in "Setting Begin and End Times". Or you can use the endsync attribute to stop the group when a specific clip finishes playback:
<par endsync="first">
...
</par>
Use the attribute endsync="first" to stop the <par> group the first time a clip in the group ends playback. All other clips in the group stop playing at that point regardless of their playback status and any timing parameters specified for them.
The attribute endsync="last" causes the <par> group to conclude when all clips have finished playing. Because this is the default value, you can omit the endsync attribute from the <par> tag to achieve this effect.
The attribute endsync="id(clip id)" causes the <par> group to conclude when the specified clip reaches its end. All other clips in the group stop playing at that point regardless of their playback status and any timing parameters specified for them. The specified clip must have a corresponding id value in its source tag:
<parendsync="id(vid)">
<videoid="vid"src="videos/newsong.rm"/>
<textstream src="lyrics/newsong.rt"/>
</par>
The repeat="n" attribute makes a clip or group play a specified number of times. You can add it to a clip source tag, for example:
<video src="videos/newsong.rm" repeat="4"/>
You can also add it to a <seq> or <par> group to make the entire group repeat:
<parrepeat="3">
<audio src="music/newsong.rm"/>
<textstream src="lyrics/newsong.rt"/>
</par>
In the following example, an audio clip within a <par> group plays twice. Assuming the audio lasts longer than the text stream, the <par> group ends when the audio clip concludes its second playback:
<par>
<audio src="music/newsong.rm"repeat="2"/>
<textstream src="lyrics/newsong.rt"/>
</par>
In the following <seq> group, the second video plays only after the first video plays twice:
<seq>
<video src="videos/newsong.rm"repeat="2"/>
<video src="videos/newsong2.rm"/>
</seq>
You can combine and nest <seq> and <par> tags as needed. Note that the organization of these tags greatly affects the presentation playback:
<seq>
clip 1
<par>
clip 2
clip 3
</par>
clip 4
</seq>
In the example above, clip 1 plays first. When it finishes, clip 2 and clip 3 play together. When both clip 2 and clip 3 have finished, clip 4 plays. You get very different results, though, if you switch the <seq> and <par> groupings:
<par>
clip 1
<seq>
clip 2
clip 3
</seq>
clip 4
</par>
In this example, clip 1, clip 2, and clip 4 all begin at the same time. When clip 2 finishes, clip 3 starts. The following figure illustrates the difference between these different groupings.
SMIL timing elements let you specify when a clip or group starts playing and how long it plays. All timing elements are optional. If you do not set them, clips start and stop according to their normal timelines and their positions within <par> and <seq> groups. The easiest way to designate a time is with shorthand markers of h, min, s, and ms as illustrated in the following table.
| Shorthand Example | Value |
|---|---|
2.5h |
2 hours, 30 minutes |
2.75min |
2 minutes, 45 seconds |
15.55s |
15 seconds, 550 milliseconds |
670.2ms |
670.2 milliseconds |
|
|
Tip |
|---|
Decimal values are not required. You can express two
seconds as "2s" or "2.0s", for example.
|
You can also express time elements in a hh:mm:ss.xy format. Here, hh is hours, mm is minutes, ss is seconds, x is tenths of seconds, and y is hundredths of seconds. In this example:
begin="02:34.0"
the time value is 2 minutes, 34 seconds. If the value does not include a decimal point, RealPlayer takes the last value to be seconds. So it reads the following value as 2 minutes, 34 seconds rather than as 2 hours, 34 minutes:
begin="02:34"
The begin attribute works for any clip or group. You can use it to start a clip at a specific point within the timeline:
<video src="videos/newsong.rm" begin="20.5s"/>
Were this clip in a <par> group, the begin attribute would start the clip playing back 20.5 seconds after the group becomes active. If the clip were in a <seq> group, the attribute would delay the clip's normal playback by inserting 20.5 seconds of blank time before the clip starts. Hence timing is relative to the start of the <seq> or <par> group, not the start of the overall presentation.
Additionally, you can set an end attribute alone or combined with a begin attribute as shown here:
<video src="videos/newsong.rm" begin="20.5s" end="62.7s"/>
In this example, the clip ends at 62.7 seconds into its part of the presentation timeline, playing a total of 42.2 seconds regardless of the length of its internal timeline. If the video's internal timeline is shorter (30 seconds, for example) the fill attribute determines what happens onscreen after the video stops playing but before the end time is reached.
|
|
Additional Information |
|---|
| See "Setting a Fill". |
You can use begin or end with a <par> or <seq> group:
<par begin= "5s" end= "3.5min">
...
</par>
This begin value delays group playback until 5 seconds after the preceding group or clip finishes. The end time means all clips in the group stop playing after 3.5 minutes regardless of their states. If all clips reach their normal conclusion by 3 minutes and 20 seconds after the group starts, for example, the next group or clip starts after 10 seconds of blank time.
If you use an end time and a repeat attribute as described in "Repeating a Clip or Group", the group repeats only after the end time elapses. You should not set an end time along with an endsync attribute in a <par> group, as this sets up conflicting end times. For more on endsync, see "Ending a Parallel Group on a Specific Clip".
The clip-begin and clip-end attributes specify a clip's internal timing marks where playback begins and ends. You can use them with clips that have internal timelines, such as audio, video, and animation. Do not use them with groups or static clips such as still images. Here is an example:
<video src="videos/newsong.rm" clip-begin="10.5s" clip-end="50.7s"/>
Here, the clip starts playing at its internal 10.5-second mark rather than at its normal beginning. It stops when it reaches its 50.7-second mark, playing for a total of 40.2 seconds.
 |
Note |
|---|
Do not use clip-begin and clip-end for a live broadcast or
when playing clips back from a Web server. For more
information, see "Limitations on Web Server Playback"
and "Using SMIL with a Broadcast".
|
You can combine clip-begin and clip-end attributes with begin and end attributes. Here, a begin time has been added to the clip example shown above:
<video src="videos/newsong.rm" clip-begin="10.5s" clip-end="50.7s" begin="5s"/>
The begin time delays the clip's normal starting point by five seconds. When this time elapses, the clip starts at its 10.5 second internal timeline marker, then plays for 40.2 seconds. In this case, the clip-end attribute determines how long the video is active. But you could also add an end attribute as shown here to modify this behavior:
<video src="videos/newsong.rm" clip-begin="10.5s" clip-end="50.7s" begin="5s"
end="50s"/>
Combined with begin, the end value of 50 means the clip's "window" within the presentation is 45 seconds. Because the clip stops playing after 40.2 seconds, there is an extra 4.8 seconds during which the clip does not play but remains active. How the video window appears during these final seconds depends on the fill attribute, as described in "Setting a Fill".
The dur attribute controls how long a clip or group is active after it starts to play back. It is useful with graphic images, as shown in this example:
<img src="graphics/poster.jpg" dur="14.5s"/>
This dur time makes the graphic disappear 14.5 seconds after it appears. You can also use dur in place of end. For example, in the following clip:
<video src="videos/newsong.rm" begin="20.5s" end="62.7s"/>
you can substitute a dur attribute for the end attribute to achieve the same result:
<video src="videos/newsong.rm" begin="20.5s" dur="42.2s"/>
In both examples, the clips stop playback 42.2 seconds after starting. With the end attribute, the total playing time is the end value minus the begin value. The dur attribute ignores the begin value, stopping the clip 42.2 seconds after it starts. Use either end or dur, therefore, depending on how you want to measure time. Do not use both attributes in the same tag, however.
|
|
Additional Information |
|---|
The dur attribute can function like end in a group, too.
For more information, see "Using Begin and End Times
with Groups".
|
The fill attribute determines what happens to the clip immediately after it plays to its normal end point, or its specified end time or duration elapses. The fill value can be remove or freeze.
The default value fill="remove" removes the clip. When this attribute is used with a still image, the image disappears once the end time has elapsed.
Use fill="freeze" to freeze the clip on its last frame. When used with a video, the video's last frame stays on the screen. Suppose that you have a 20-second video and specify a 30-second duration with freeze:
<video src="videos/newsong.rm" dur="30s" fill="freeze"/>
After the video plays, its last frame displays for 10 seconds. The video disappears when the end time elapses. The fill="freeze" attribute has no effect on audio. Do not use fill="freeze" for a graphic image that also uses a dur attribute.
The following example shows two audio clips with different timing options:
<par>
<audio src="song1.rm" clip-begin="30.4s" dur="30s"/>
<audio src="song2.rm" begin="28s" clip-begin="2.4s"clip-end="13.7s"/>
</par>
The timing options modify the <par> tag so that the two clips start at different times. The first clip begins to play immediately, but starts at 30.4 seconds into its timeline, playing for exactly 30 seconds.
The second clip is delayed for 28 seconds. That means it overlaps the first clip by 2 seconds. It starts at 2.4 seconds into its timeline and ends at 13.7 seconds into its timeline, thus playing for 11.3 seconds. The total playing time for this group is 30 seconds for the first clip, plus 11.3 seconds for the second clip, minus the 2 second overlap: 39.3 seconds. The following figure illustrates the relationships of the clip timelines to the overall presentation timeline.
With the <switch> tag, you can specify multiple options that RealPlayer can choose between. The <switch> group specifies any number of choices in this form:
<switch>
<choice1 test-attribute="value1"/>
<choice2 test-attribute="value2"/>
...
</switch>
RealPlayer looks at choices in order, evaluating each test attribute and its value to determine which clip to choose. The choices are typically clip source tags such as <video test-attribute="value"/>, but RealPlayer can also choose between groups when test attributes appear in <par> or <seq> tags.
When the <switch> group test attribute is system-language, each source clip is for a different language. The following example shows a video slideshow with separate audio narrations in French, German, Spanish, and English. Based on the language preference set through its Options menu, as well as the system-language code defined in the SMIL file, RealPlayer chooses a clip to play:
<par>
<video src="slides/seattle.rm"/>
<!-- select audio based on RealPlayer language preference setting -->
<switch>
<audio src="french/seattle.rm" system-language="fr"/>
<audio src="german/seattle.rm" system-language="de"/>
<audio src="spanish/seattle.rm" system-language="es"/>
<audio src="english/seattle.rm"/>
</switch>
</par>
Because the last option does not have a test attribute, a RealPlayer that does not have French, German, or Spanish explicitly set as its preferred language chooses the English clip regardless of its actual language setting. RealPlayer evaluates options in order, so the last option should be, as shown in this example, a default language that applies if no other option is viable. If you list no default option and certain RealPlayers prefer languages other than the ones you list, those RealPlayers will not play any of the clips.
|
|
Additional Information |
|---|
Appendix F lists the system-language codes such as "fr"
you use to designate content in different languages.
|
To serve different clips to viewers with different connection speeds, use the <switch> tag to define options each RealPlayer can choose based on its available bandwidth. As shown below, you can group clips with <par> tags, using the system-bitrate attribute to list the approximate bandwidth (in Kbps) each group consumes:
<switch>
<par system-bitrate="75000">
<!--for dual isdn and faster-->
<audio src="audio/newsong1.rm"/>
<video src="video/newsong1.rm"/>
<textstream src="lyrics/newsong1.rt"/>
</par>
<par system-bitrate="47000">
<!--for single isdn-->
<audio src="audio/newsong2.rm"/>
<video src="video/newsong2.rm"/>
<textstream src="lyrics/newsong2.rt"/>
</par>
<par system-bitrate="20000">
<!--for 28.8 modems-->
<audio src="audio/newsong3.rm"/>
<video src="video/newsong3.rm"/>
<textstream src="lyrics/newsong3.rt"/>
</par>
</switch>
Always list system bandwidth options from highest to lowest. RealPlayer evaluates options in the order listed, selecting the first viable option even if subsequent options suit it better. So if the 28.8 Kbps option is first, a RealPlayer with a dual-ISDN connection will choose that option because it is the first viable option listed.
Also ensure that the last option satisfies the lowest bandwidth connection you want to support. If you do not list an option suitable for 28.8 Kbps modems, for example, RealPlayers connected through those modems will not play the presentation.
|
|
Additional Information |
|---|
See the table "Bit Rates Available for Streaming Clips"
for bandwidth guidelines. "Writing Complex SMIL
Switch Statements" explains how to use <switch> with
SureStream clips, as well as how to test for both
language and bandwidth.
|
The SMIL file header can use <meta> tags to list presentation information such as title, author, and copyright:
<head>
<meta name="title" content="Bob and Susan Discuss Streaming Media"/>
<meta name="author" content="RealNetworks Media Productions"/>
<meta name="copyright" content="(c)1998 RealNetworks"/>
<meta name="abstract" content="Bob and Susan, two Internet technology
experts, discuss the future of streaming media."/>
</head>
This example defines a title, author, copyright, and abstract. You can define other values as well, such as an e-mail address, simply by adding an attribute such as name="email". This information displays when the user gives the RealPlayer Help>About this Presentation command. In addition, the title displays at the top of the RealPlayer window and in the run list under the RealPlayer File menu.
|
|
Note |
|---|
Name values, as in name="title", must be lowercase.
When defining long content such as an abstract, don't
use line breaks or tabs within a content value.
|
In addition to the presentation information, RealPlayer keeps a playlist of clip titles. Through this playlist, users can play different parts of the SMIL presentation. The following example shows the same header information as above, but adds titles for each video clip in the body section:
<smil>
<head>
<meta name="title" content="Bob and Susan Discuss Streaming Media"/>
<meta name="author" content="RealNetworks Media Productions"/>
<meta name="copyright" content="(c)1998 RealNetworks"/>
<meta name="abstract" content="Bob and Susan, two Internet technology
experts, discuss the future of streaming media."/>
</head>
<body>
<seq>
<video src="clip1.rm" title="Bob Expounds his View"/>
<video src="clip2.rm" title="Susan Responds with Another Perspective"/>
<video src="clip3.rm" title="Summary: A Look at the Future"/>
</seq>
</body>
</smil>
The titles for the individual clips appear in RealPlayer's pull-down playlist as illustrated in the following figure. The user can also view the playlist with RealPlayer's File>Playlist command.
Only the clip titles affect the playlist, but you can also define an author, copyright, and abstract for each clip. As illustrated below, clip information appears when the RealPlayer user gives the Help>About this Presentation command while the clip plays.
Note that in this figure, the clip information section shows the clip title defined in the SMIL file, but also includes author and copyright information not defined through SMIL. The author and copyright information is encoded in the clip.
The following points explain the relationship between clip information set through SMIL and information encoded in a clip.
title, author, copyright, and abstract attributes to the clip's SMIL source tag:
<ref src="..." title="title" author="name" copyright="copyright" abstract="abstract"/>
title, author, copyright, and abstract attributes are supported for clips. For the entire presentation, however, you can define any information through the header section <meta.../> tags. See "Adding Presentation Information" for more information.
title, author, copyright, and abstract attributes in the <par> tag instead of the clip source tags. Clip titles are ignored, and only the group title shows in the playlist. For more on <par>, see "Playing Clips in Parallel".
title, author, copyright, or abstract attribute in a <seq> tag is ignored. This information must be defined for individual clips or parallel groups.
In a header, SMIL interprets quotation marks, apostrophes, ampersands, and angle brackets as syntax markers. To have these characters show up as text in RealPlayer, you use codes in the header. As shown in the following table, codes begin with an ampersand ("&") and end with a semicolon (";"). SMIL interprets these codes the same way as popular Web browsers.
For example, to add the following as a title:
"Multimedia's <smil> & you"
You enter this in the SMIL file header:
<meta name="title" content=
""Multimedia's <smil> & you""/>
If your presentation plays only one clip at a time, you do not need to create a layout. Each clip automatically plays in the main RealPlayer window, the window resizing automatically for each new clip. If you want to keep the playback area stable in size as different clips play back, or if your presentation displays several clips at a time, you can define playback areas called "regions" within the main RealPlayer window:
<layout> group, using <region> tags to name playback regions and define their sizes and locations within the RealPlayer main window. See "Defining the Layout" below.
region attributes to specify which source clips play in which regions. See "Assigning Clips to Regions".
|
|
Additional Information |
|---|
| See "Laying out SMIL Presentations" for instructions on using RealPlayer's Netscape plug-in or ActiveX control to lay out the presentation in a Web page instead of in RealPlayer. |
When you lay out regions, you create a root-layout region that defines the size of the RealPlayer main window. You then create other regions using a simple coordinate system measured across and down from the top, left-hand corner of the root-layout region. All measurements are in pixels or percentages, with zero pixels as the default. The following table lists the attributes that define region size and placement.
The next figure illustrates the layout of a single playback region within a root-layout region.
With the <root-layout.../> tag, you specify the size of the entire playback area in pixels (percentages are not accepted for the root-layout region). You cannot display images or play clips in the root-layout region, as it is meant to set the overall playback area. The example shown below creates a root-layout region 250 pixels wide by 230 pixels high. When the presentation begins, the RealPlayer window expands to this size. Other regions measure their top and left offsets from the upper, left-hand corner of this root-layout region:
<head>
<layout>
<root-layout width="250" height="230"/>...other regions defined here...</layout>
</head>
|
|
Note |
|---|
Although you can omit root-layout to have RealPlayer
calculate the playback area based on the sizes of the
other regions, it is better to define root-layout to avoid
unexpected results.
|
You create playback regions for clips with <region> tags. These regions must lay within the root-layout region. Any part of a region that lays outside the root-layout region is cut off. Each <region.../> tag must define top, left, width, and height attributes. The example below defines two regions named "videoregion" and "textregion":
<head>
<layout>
<root-layout background-color="maroon" width="250" height="230"/>
<region id="videoregion" top="5" left="5" width="240" height="180"/></layout>
<region id="textregion" top="200" left="5" width="240" height="20"/>
</head>
In this example, both regions are offset 5 pixels to the right of the root-layout region's left edge. The video region displays 5 pixels down from the top of the root-layout region, and the text region displays 200 pixels down. The following figure illustrates this placement.
Note the following about SMIL regions:
z-index attribute, you can emulate dynamic creation and destruction of regions. For details, see "Hiding Regions with z-index".
z-index attribute to make it display behind other regions. For more information, see "Ordering Overlapping Regions with z-index".
For a region's height, width, and offset measurements, you can use percentages that reflect a fraction of the root-layout region's size. The following example uses percentages to define playback areas similar to those shown in the sample above:
<head>
<layout>
<root-layout background-color="maroon" width="250" height="230"/>
<region id="videoregion"top="2%" left="2%" width="96%" height="78%"/>
<region id="textregion"top="80%" left="2%" width="96%" height="18%"/>
</layout>
</head>
Note the following when using percentage values to define regions:
top and left offset measurements in percentages, for example, while specifying the width and height measurements in pixels.
By default, the root-layout region is black. All other regions use transparency as their default. In the SMIL layout, you can specify another background color for any region:
<layout>
<root-layout background-color="maroon"/>
<region id="videoregion" background-color="silver".../>
<region id="textregion" background-color="#C2EBD7".../>
</layout>
For the color value, use any RGB hexadecimal value (#RRGGBB) supported by HTML, or one of the following predefined color names, listed here with their corresponding hexadecimal values:
A region is transparent if you do not define its background color. You can also specify "transparent" as a region background color. Transparency means that the region is not visible until a clip starts to play in it. However, this is not true transparency. If the clip contains transparency too, you will not see through the clip and its region to the root-layout region.
When a clip is encoded at a size different from the playback region's defined size, the fit attribute determines how the clip fits the region:
<region id="videoregion" width="128" height="64" fit="meet"/>
The fit attribute uses one of the values described in the following table. If you do not specify a fit attribute, the clip uses the default value hidden. In no case will a clip display outside the boundaries of its region.
The following figure illustrates the effect that fit attributes have on a source clip that plays in windows with different sizes and aspect ratios.
If regions overlap, you can use the z-index attribute to determine which regions appear in front. The following example creates a video region that overlaps an image region:
<layout>
<root-layout background-color="gray" width="280" height="220"/>
<region id="image" top="10" left="10" width="260" height="200"z-index="0"/>
<region id="video" top="20" left="20" width="240" height="180"z-index="1"/>
</layout>
This example defines a gray root-layout region 220 pixels high by 280 pixels wide. A smaller image region is centered within this gray background. Its z-index value of zero makes it display behind all other regions, but not behind the root-layout region. The video region centered in the image region appears on top of that region because of its higher value for z-index. Another region could overlap the video region with z-index set, for instance, to 2, 5, or 29. The following figure illustrates these regions.
The following are points to observe when using z-index:
z-index.
z-index values can include negative integers (such as -4), 0 (zero), and positive integers (such as 5). A region with a z-index value of -4, for example, displays behind a region with a value of 0, which displays behind a region with a value of 5.
z-index.
z-index="3", for example.
|
|
Additional Information |
|---|
See "Hiding Regions with z-index" for information on
using z-index to make regions appear to come and go
dynamically.
|
After you define the layout in the header section as described in"Defining the Layout", you use region attributes within source tags to associate each clip with a region. In the following example, the video and text clips are assigned to the video and text regions defined in the header:
<smil>
<head>
<layout>
<root-layout background-color="maroon" width="250" height="230"/>
<regionid="videoregion" top="5" left="5" width="240" height="180"/>
<regionid="textregion"top="200" left="5" width="240" height="20"/>
</layout>
</head>
<body>
<par>
<video src="video.rm" region="videoregion"/><audio src="audio.rm"/>
<textstream src="text.rt" region="textregion"/></par>
</body>
</smil>
You can reuse regions by assigning sequential clips to them. For example, you can play a video clip in a region, then display another clip in that region after the first clip finishes. Don't assign the same region to two clips that play at the same time, however. You don't assign audio clips to regions at all because audio does display on the screen.
The following example displays three regions: a news region, a video region, and a stock ticker region. The news and video regions are arranged side by side at the top of the RealPlayer display window. The stock ticker region appears below them.
<smil>
<head>
<!--presentation with 2 text clips and 1 video clip-->
<meta name="title" content="News of the Week"/>
<layout>
<root-layout width="430" height="165"/>
<region id="newsregion" top="0" left="0" width="250" height="144"/>
<region id="videoregion" top="0" left="250"width="180" height="144"/>
<region id="stockregion" top="145" left="0"width="430" height="20"/>
</layout>
</head>
<body>
<par>
<!--play these 3 clips simultaneously-->
<textstream src="news.rt" region="newsregion"/>
<video src="newsvid.rm" region="videoregion"/>
<textstream src="stocks.rt" region="stockregion"/>
</par>
</body>
</smil>
The following figure illustrates the design of these regions.
A SMIL file can define links to other media. A video might link to a second video, for example. When the viewer clicks the link, the second video replaces the first. Or the video could link to an HTML page that opens in the viewer's browser. You can even define areas as hot spots with links that vary over time. The bottom corner of a video can link to a different URL every ten seconds, for instance.
The simplest type of link connects an entire source clip to another clip. As in HTML, you define the link with <a> and </a> tags. But whereas you enclose text between <a> and </a> in HTML, you enclose a clip source tag between <a> and </a> in SMIL:
<a href="rtsp://realserver.example.com/video2.rm">
<video src="video.rm" region="videoregion"/>
</a>
The example above links the source clip video.rm to the target clip video2.rm. When a viewer moves the cursor over the source clip as it plays, the cursor turns to a hand icon to indicate that the clip is a link. When the viewer clicks video.rm as it plays, video2.rm replaces it. The URL begins with rtsp:// if the linked clip streams to RealPlayer from RealServer, or http:// if the file downloads to the browser from a Web server. When targeting a browser, include the show attribute as described below.
|
|
Additional Information |
|---|
| For information on RTSP URLs, see "Linking to Clips on RealServer". |
An <a> tag or <anchor> tag (see "Defining Hot Spot Links") can include a show attribute that determines where a linked clip displays:
<a href="http://www.example.com/index.htm"show="new">
<video src="video.rm" region="videoregion"/>
</a>
The default attribute show="replace" causes the linked clip to replace the source clip in RealPlayer. This default behavior also occurs if you do not include the show attribute in the link. The following are important differences between RealPlayer and Web browsers to keep in mind when creating links:
|
|
Tip |
|---|
| RealNetworks has created an extension to SMIL that lets you open a linked presentation in a new RealPlayer window. For more information, see "Popping Up New RealPlayer Windows". |
|
|
Additional Information |
|---|
| "Linking to a SMIL File". |
The values new and pause both open the linked clip in the viewer's default browser. The source clip continues to play in RealPlayer if you use show="new". With show="pause", the source clip pauses in RealPlayer. The viewer can restart playback at any time, though, by clicking RealPlayer's Play button.
Use either show="new" or show="pause" to open a Web page or another clip viewable within a browser. You can use these attributes to link a RealSystem presentation to your home page, for example. Do not use them to link to another clip played in RealPlayer, however, such as a SMIL file or a RealVideo clip.
Within a SMIL file you can define hot spots using an <anchor> tag. Whereas the <a> tag turns the entire source clip into a link, the <anchor> tag turns only a defined area into a link. With <anchor> tags you can create links similar to those in HTML image maps. But SMIL links can be temporal as well as spatial. A link might be valid for just ten seconds during a source clip's timeline, for instance.
The <anchor> tag differs from the <a> tag in that you place it within the clip source tag rather than before it:
<video src="video.rm" region="videoregion">
<anchor href="rtsp://realserver.example.com/video2.rm" .../>
</video>
An <anchor> tag ends with a closing slash. But the clip source tag does not end with a closing slash as it normally would. Instead, the source tag and its subsequent <anchor> tags are followed by a closing source tag, such as </video>. The <anchor> tag includes an href attribute that uses rtsp:// if the linked clip streams from RealServer, or http:// if the file downloads to the browser from a Web server
|
|
Additional Information |
|---|
| For information on RTSP URLs, see "Linking to Clips on RealServer". To target a browser with a link, see "Targeting RealPlayer or a Browser". |
The <anchor> tag's coords attribute defines spatial coordinates for the hot spot rectangle. Coordinate values in pixels or percentages define the rectangle's offset from the upper, left-hand corner of the source clip as shown in this example:
<video src="video.rm" region="videoregion">
<anchor href="..."coords="20,40,80,120"/>
</video>
The coordinate values for the hot spot rectangle follow this order:
The sample above uses pixel values to define a hot spot 60 pixels wide (80 pixels minus 20 pixels) 80 pixels high (120 pixels minus 40 pixels). It produces a hot spot like that shown in the following figure.
The coords attribute can also use percentage values to create hot spots relative to the source clip's size. The following sample places in the center of the source clip a hot spot that is a quarter the size of the source clip:
<video src="video.rm" region="videoregion">
<anchor href="..."coords="25%,25%,75%,75%"/>
</video>
The following table lists sample percentage coordinates that define hot spots for a source clip. Each hot spot is a quarter the size of the source clip.
Note the following when defining hot spots:
In addition to defining spatial coordinates, the <anchor> tag can set temporal attributes that specify when the link is active. If you do not include temporal attributes, the link stays active as long as the source clip appears on screen. To add timing attributes, use the SMIL begin and end values. (You cannot use dur, clip-begin, or clip-end.)
The following example creates two temporal links for the clip video.rm. The first link is active for the first five seconds of playback. The second link is active for the next five seconds. Because no spatial coordinates are given, the entire video is a link:
<video src="video.rm" region="videoregion">
<anchor href="rtsp://.../video2.rm"begin="0s" end="5s"/>
<anchor href="rtsp://.../video3.rm"begin="5s" end="10s"/>
</video>
|
|
Additional Information |
|---|
| See "Setting Begin and End Times". The attributes use the SMIL timing values described in "Specifying Timing". |
A SMIL file can define a link to another SMIL file or another part of itself. For example, a video played through a SMIL file may link to another SMIL file so that when a viewer clicks the video, a new presentation starts up in RealPlayer. To do this, you simply set the href attribute for the <a> or <anchor> tag to the new SMIL file's URL.
You can also link to portions of a SMIL file. The following example from a target SMIL file uses id attributes (such as those used in regions to create region names) to define a target name for a <par> tag that groups a video and a text clip. This id attribute functions like a name attribute in an HTML <a> tag:
<parid="text_and_video">
<video src="video2.rm" region="newsregion"/>
<textstream src="text.rt" region="textregion"/>
</par>
You then link the source SMIL file to the named target by including a pound sign ("#") and the target name within the link URL. Assuming the target SMIL file is named newmedia.smil, the source file's link to the <par> group looks like this:
<a href="rtsp://realserver.example.com/newmedia.smil#text_and_video">
<video src="video.rm" region="videoregion"/>
</a>
Note that the target SMIL file defines two regions, newsregion and textregion. When RealPlayer receives the new SMIL file, it creates those regions as specified in the file's header.
Note the following when linking to another SMIL file:
<par> or <seq> group by defining an id attribute for the clip or group. Do not link to an element in a SMIL file header, however. Although you can link to a <switch> group, do not link to a clip or group within a <switch> group.
<par> group and exclude the other clips in that group. All clips in the group will play in their designated regions.
href attribute value to the target id, such as <a href="#text_and_video">. Be sure to include the pound sign before the id value.
You can use the <anchor> tag's time coordinates to create a timeline offset in a linked clip. Suppose you want to link a video to another video at 30 seconds into the second video's timeline. In the source SMIL file, you define an <a> or <anchor> link from the first video to a SMIL file that contains the second video. In the second SMIL file, the video's <anchor> tag defines the timeline offset using SMIL timing parameters.
Here is a sample of the link in the first SMIL file:
<a href="rtsp://realserver.example.com/newmedia.smil#vid2">
<video src="video.rm" region="videoregion"/>
</a>
The following is the linked video clip in the second SMIL file, newmedia.smil:
<video src="video2.rm" region="newsregion"><anchor id="vid2" begin="30s"/>
</video>
|
|
Additional Information |
|---|
| "Specifying Timing" describes the SMIL timing values. |