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 10.
 |
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 media clip as explained in Chapter 10. |
 |
Additional Information |
|---|
| Once you are familiar with SMIL, refer to "Appendix C: 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 media clips played in sequence:
<smil>
<body>
<audio src="rtsp://realserver.company.com/one.rm"/>
<audio src="rtsp://realserver.company.com/two.rm"/>
<audio src="rtsp://realserver.company.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.company.com/audio/first.rm"/>
The tag begins with one of the clip type attributes listed in the following table.
| Clip Attribute | Used For |
|---|---|
animation |
Animation clips, such as Shockwave Flash (.swf) used in Flash with RealSystem G2. |
audio |
Audio clips such as RealAudio (.rm). |
img |
JPEG (.jpg) or GIF images (.gif). 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 a list of supported streaming formats, see "Choosing Media to Stream". |
Although a source clip tag must start with a clip type attribute, attributes do not affect playback because RealPlayer determines the clip type through other means. Specifying a text clip as audio, for example, does not adversely affect playback. Although using the different clip attributes helps you keep track of the media types, you could specify all clips with ref, for example.
After the clip type attribute, the 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 G2 presentation streams over a network, the media clips reside on RealServer. Each source clip's src attribute gives the clip's URL:
<audio src="rtsp://realserver.company.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.company.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 has a full URL specified for it, 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.company.com/audio/first.rm
rtsp://realserver.company.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.
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.company.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 (as with 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, omit the
<head> tag or launch the presentation through a Ram
file as described in "Creating a Ram File Manually".
This problem does not occur with Netscape Navigator
or Internet Explorer 4.0. Nor does it occur when you
stream clips from a server to Internet Explorer 3.0.
|
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="audiosong.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>
<video src="videossong.rm"/>
<textstream src="lyricssong.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 G2 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 timing value 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="videossong.rm"/>
<textstream src="lyricssong.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="videossong.rm" repeat="4"/>
You can also add it to a <seq> or <par> group to make the entire group repeat:
<parrepeat="3">
<video src="videossong.rm"/>
<textstream src="lyricssong.rt"/>
</par>
In the following example, a video clip within a <par> group plays twice. Assuming the video lasts longer than the text stream, the <par> group ends when the video concludes its second playback:
<par>
<video src="videossong.rm"repeat="2"/>
<textstream src="lyricssong.rt"/>
</par>
In the following <seq> group, the second video plays only after the first video plays twice:
<seq>
<video src="videossong.rm"repeat="2"/>
<video src="videossong2.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="videossong.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="videossong.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 |
|---|
| "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.
|
|
Additional Information |
|---|
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="videossong.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 when playing clips
back from a Web server. For more information, see
"Limitations on Web Server Playback".
|
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="videossong.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="videossong.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.
|
|
Additional Information |
|---|
| "Setting a Fill". |
The dur attribute controls how long a clip or group appears 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 disappears 14.5 seconds after it appears. You can also use dur in place of end. For example, in the following clip:
<video src="videossong.rm" begin="20.5s" end="62.7s"/>
you can substitute a dur attribute for the end attribute to achieve the same result:
<video src="videossong.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="videossong.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 E 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="audiosong1.rm"/>
<video src="videosong1.rm"/>
<textstream src="lyricssong1.rt"/>
</par>
<par system-bitrate="47000">
<!--for single isdn-->
<audio src="audiosong2.rm"/>
<video src="videosong2.rm"/>
<textstream src="lyricssong2.rt"/>
</par>
<par system-bitrate="20000">
<!--for 28.8 modems-->
<audio src="audiosong3.rm"/>
<video src="videosong3.rm"/>
<textstream src="lyricssong3.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 |
|---|
"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, and copyright attributes to the clip's SMIL source tag:
<ref src="..." title="title" author="name" copyright="copyright"/>
abstract attribute and its appropriate value to the clip's source tag:
<ref src="..." 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. 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 media 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.
|
|
Additional 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 media clip contains transparency too, you will not see through the clip and region to the root-layout region.
When a media 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 media display outside the playback region's boundaries.
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 not require a display region.
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="Music 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 media 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 media source tag between <a> and </a> in SMIL:
<a href="rtsp://realserver.company.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, be sure to 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.company.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:
|
|
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 media 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 media 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 media source tag rather than before it:
<video src="video.rm" region="videoregion">
<anchor href="rtsp://realserver.company.com/video2.rm" .../>
</video>
An <anchor> tag ends with a closing slash. But the media 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 media 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.company.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.company.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. |
For a still image, you can use the following options to modify the image's streaming characteristics, or to link it to RealPlayer commands. These options are not SMIL parameters, but extensions to the image's SMIL source tag, which is described in "Specifying Clip Locations". The following table summarizes the image options, which are described in detail below.
A question mark operator ("?") separates image options from the image URL in the SMIL source tag. To use multiple image options, put a question mark before the first option, then separate the remaining options with ampersands ("&"). The order of options does not matter. The following shows the general form for two image options added to the image source tag. Note that image options and values are not in quotation marks because they are part of the quoted src value:
<image src="URL?option=value&option=value"/>
Here is an example that combines bit rate and background color options:
<image src="ad1.gif?bitrate=1000&bgcolor=blue"/>
By default, an image streams at 12 Kbps until RealPlayer receives it. You can set a higher bit rate to take advantage of bandwidth availability and stream an image quickly. Or you can set a lower bit rate when streaming images in parallel with another clip so that the other clip has enough bandwidth for uninterrupted playback. The following example shows three sequential image files set to stream at a low bit rate to ensure that a video playing in parallel does not stall:
<par>
<video src="video.rm" region ="videoregion"/>
<par>
<seq>
<image src="ad1.gif?bitrate=1000" begin="30s" dur="60s" region="adregion"/>
<image src="ad2.gif?bitrate=1000" dur="120s" region="adregion"/>
<image src="ad3.gif?bitrate=1000" dur="60s" region="adregion"/>
</seq>
</par>
</par>
In this example, each GIF image is set to stream at 1 Kbps. This ensures that each image consumes a small amount of bandwidth and does not interfere with video playback. The <par> tag just outside the <seq> tag makes RealServer balance the bit rates of the images as a single group rather than as a discrete sequence.
|
|
Additional Information |
|---|
For more on using <par> to balance bandwidth, see
"Smoothing Transitions between Clips".
|
Keep in mind that the image size divided by the maximum bit rate equals the minimum time for streaming the image. Assuming images in this example are 30 Kilobits, each image takes about 30 seconds to stream. For this reason, the first image is set to display 30 seconds after the video begins to play. If no begin time were defined, the video would be delayed up to 30 seconds while the first image streams to RealPlayer. As well, each successive image must be able to stream during the preceding image's duration.
For GIF images that include transparency, you can use bgcolor to substitute a color for the transparency. Color values are any hexadecimal color value without the leading pound sign ("#"), or a predefined color name as described in "Adding a Background Color". If you do not set the color, the region's defined background color shows through transparent spots in the image. Here is an example:
<image src="ad1.gif?bgcolor=BB21AA"/>
The image url and target options let you link an image to a fully qualified URL so that when the viewer clicks the image, the URL opens in the viewer's browser or RealPlayer. The following example shows an image linked to a URL that opens in the viewer's default browser:
<image src="ad.gif?url=http://www.company.com&target=_browser"
region="ads"/>
This next example shows an image linked to a URL that opens in RealPlayer:
<image src="go.gif?url=rtsp://realserver.company.com/media.smil&target=_player"
region="next"/>
Keep in mind that opening a URL in RealPlayer replaces the current presentation with the new clip or SMIL file.
|
|
Note |
|---|
| The image hyperlink options duplicate the SMIL hyperlink features described in "Linking to Other Media". You can use either method depending on your preference. |
With url=command:command&target=_player, you can make the image a link that causes RealPlayer to stop, pause, play, or seek to a specific point in the presentation timeline. The following example shows three images set to appear in three separate SMIL regions. Each image issues a different RealPlayer command when clicked:
<par>
<image src="play.gif?url=command:play()&target=_player" region="play"/>
<image src="pause.gif?url=command:pause()&target=_player" region="pause"/>
<image src="stop.gif?url=command:stop()&target=_player" region="stop"/>
</par>
An image can also issue a seek command that specifies a certain point in the presentation timeline:
<image src="seek.gif?url=command:seek(1:35.4)&target=_player"
region="seek"/>
In the example above, clicking the image instructs RealPlayer to seek to 1:35.4 into the presentation. This option does not use SMIL shorthand timing values such as s for seconds or min for minutes. Instead, the time format is like the "Normal Play Time Format", except that it also accepts milliseconds and days as possible values.
dd:hh:mm:ss.xyz
Here, dd is days, hh is hours, mm is minutes, ss is seconds, x is tenths of seconds, y is hundredths of seconds, and z is milliseconds. Only the ss field is required.
When the time value does not include a decimal point, the last field is read as the seconds. For example, 1:30 means 1 minute and 30 seconds, whereas 1:30:00 means 1 hour and 30 minutes. Thus all the following values seek to the point in the timeline 90 minutes after the presentation begins:
url=command:seek(1:30:00.0)&target=_playerurl=command:seek(90:00)&target=_playerurl=command:seek(5400)&target=_player