When your multimedia presentation contains multiple clips-such as two videos 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 when and how files play.
When you complete your SMIL file, you put it on RealServer and link your Web page to it. Persons viewing your page then click the link to view your presentation. If you have just one file in your presentation, such as a single video file, you don't need to create a SMIL file, however. Just link your Web page to that file.
![]() |
Additional Information |
See Chapter 7 for information on laying out your presentation in a Web page instead of in RealPlayer. See Chapter 9 for instructions on linking your Web page to your SMIL file. |
You can create a SMIL file (file extension .smi
) with any text editor or word processor that can save output as plain text with line breaks. If you are familiar with HTML mark-up, you will pick up SMIL quickly. In its simplest form, a SMIL file lists multiple media files played in sequence:
<smil>
<body>
<audio src="rtsp://realserver.company.com/one.ra"/>
<audio src="rtsp://realserver.company.com/two.ra"/>
<audio src="rtsp://realserver.company.com/three.ra"/>
</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:
<smil>
...all other SMIL mark-up...
</smil>
<audio src="first.ra"/>
.smi
. Do not include spaces in the file name. For example, you can have the file my_presentation.smi but not the file my presentation.smi.
<!-- This is a comment -->
To specify a file used in your presentation, you use in the body of the SMIL file a tag that describes the file type and location:
<audio src="rtsp://realserver.company.com/audio/first.ra"/>
The tag begins with a file type attribute listed in the following table.
Although the tag must start with one of these type attributes, the attributes do not affect playback because RealPlayer determines the file type through other means. Specifying a text file as "audio," for example, does not adversely affect playback.
Following the file type, the src attribute lists the file location. How you specify this location varies depending on whether you plan to stream the presentation over a network with RealServer or access the presentation locally.
When a RealMedia presentation streams over a network, the media files reside on RealServer. Each src attribute in the SMIL file provides a URL to a media file:
src="rtsp://realserver.company.com:6060/audio/first.ra"
The following table explains the URL components:
Contact your RealServer administrator to get the RealServer address, RTSP port, and directory structure.
If your presentation includes many files that are on the same RealServer, 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.ra"/>
<audio src="audio/second.ra"/>
<audio src="rtsp://realserver.real.com/audio/third.ra"/>
</body>
Because the third file has a full URL specified for it, the base target is ignored. For the first two files, however, the src values are appended to the base target, effectively giving the files these URLs:
rtsp://realserver.company.com/audio/first.ra
rtsp://realserver.company.com/audio/second.ra
![]() |
Tip |
The relative syntax for SMIL files works like relative links in HTML. You can find additional information about this topic in an HTML reference. |
If your presentation files 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 files in this format:
src="audio/first.ra"
This example is a local, relative link to a file 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 files on their machine.
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.ra"
The SMIL file can have a header section that defines aspects of the entire presentation, such as its title:
<smil>
<head>
...all header information...
</head>
<body>
...all body information...
</body>
</smil>
In the SMIL file header, you typically provide author, title, and copyright information that shows up in the RealPlayer status panel. To do this, you use <meta> tags that have name and content attributes as shown here:
<head>
<meta name="author" content="Jane Morales"/>
<meta name="title" content="Multimedia My Way"/>
<meta name="copyright" content="(c)1998 Jane Morales"/>
</head>
Within the body, you can override header elements as needed by adding author, title, and copyright attributes to source tags:
<body>
<video src="first.rm"/>
<video src="second.rm"
author="Sam Clark"
title="Planning is the Key"/>
</body>
When the second file in this example plays, the author and title displayed in RealPlayer change to new values, but the copyright stays the same. You can also specify values for groups of files by including the author, title, and copyright attributes in <seq> and <par> tags instead of the source tags.
With the SMIL <seq> and <par> tags you can specify how and when each clip plays. The following sections explain how to play files in sequence or parallel, as well as how to add timing information to tune the presentation.
To play clips in sequence, use the <seq> tag. In the following example, the second clip begins when the first clip finishes.
<seq>
<audio src="audio/newsong.ra"/>
<audio src="audio/oldsong.ra"/>
</seq>
If your presentation included just the files above, you wouldn't need to use the <seq> tag. You could simply list the files in order and RealPlayer would play them in sequence. The <seq> tag is used mostly in combination with <par>.
You can play two or more clips at the same time by using the <par> ("parallel") tag. For example, the following plays a synchronized group of RealAudio, RealVideo, and RealText clips:
<par>
<audio src="audio/newsong.ra"/>
<video src="video/newsong.rm"/>
<textstream src="lyrics/newsong.rt"/>
</par>
RealSystem ensures that the clips stay synchronized. If some video frames don't arrive, for example, the system either drops those frames or delays playback of the other files until the frames arrive. If another part of the presentations follows in sequence after a <par> group, that part plays when all files in the <par> group finish.
Timing elements let you specify when a file 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 |
You can also express time elements in an "normal play tme" format that includes an "npt:" prefix:
"npt=hh:mm:ss.xy"
Here, hh is hours, mm is minutes, ss is seconds, x is tenths of seconds, and y is hundredths of seconds. In this example:
"npt=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 2 hours, 34 minutes:
"npt=02:34"
You can use a begin attribute like the following to start a clip at a specific point within the presentation timeline:
begin="20.5s"
In a <par> grouping, this starts the clip 20.5 seconds after the group becomes active. In a <seq> grouping, this adds 20.5 seconds of blank time before the clip begins. The begin attribute works for images, audio, video, or any other file type.
The duration attribute is for media clips with or without internal timelines. It controls how long the clip appears in the presentation:
begin="20.5s" dur="14.5s"
Applying a begin time of 20.5s and a duration of 14.5s to a graphic image, for example, makes the image appear 20.5 seconds after its part of the presentation begins. The graphic disappears 14.5 seconds later.
The fill attribute determines what happens when the duration time elapses. It can have either of these values:
Remove the clip. When used with a still image, the image disappears once the duration time has elapsed.
Freeze the clip on its last frame. When used with a video, for example, the video's last frame freezes on the screen.
Suppose that you have a 20-second video and specify a 30-second duration with a "freeze":
dur="30s" fill="freeze"
After the video plays, its last frame displays for 10 seconds. The video disappears when the duration time expires:
The clip-begin and clip-end attributes are for files that have internal timelines, such as audio or video files. They specify the internal timing marks where playback begins and ends:
clip-begin="10.5s" clip-end="50.7s"
In this example, the clip starts playing at its internal 10.5-second mark rather than at its normal beginning. It stops playing when it reaches its 50.7-second mark, playing for a total of 40.2 seconds.
The following example shows two audio files with different timing options:
<par>
<audio src="song1.ra" clip-begin="30.4s" clip-end="60.4s"/>
<audio src="song2.ra" 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. Because it ends at 60.4 seconds into its timeline, it plays 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.
You can combine and nest <seq> and <par> tags as you need them. Note that the organization of these tags greatly affects the presentation playback.
<seq>
file 1
<par>
file 2
file 3
</par>
file 4
</seq>
In the example above, file 1 plays first. When it finishes, file 2 and file 3 play together. When both file 2 and file 3 have finished, file 4 plays. You get very different results, though, if you switch the <seq> and <par> groupings:
<par>
file 1
<seq>
file 2
file 3
</seq>
file 4
</par>
In this example, file 1, file 2, and file 4 all begin at the same time. When file 2 finishes, file 3 starts. The following figure illustrates the difference between these different groupings.
With the <switch> tag, you can specify multiple options that RealPlayer can choose between:
<switch>
<type src="location1" test-attribute="value1"/>
<type src="location2" test-attribute="value2"/>
</switch>
The <switch> tag specifies any number of choices. RealPlayer looks at choices in order, evaluating the test attribute and its value to determine which file to choose. If the test attribute is system-language for example, each switch statement lists the location of a file for a different language. RealPlayer then chooses a file according to its language preference setting.
The following table shows the languages that RealPlayer currently supports.
Language | Test-Attribute Value |
---|---|
English | en |
French | fr |
German | gr |
Japanese | jp |
The following example shows a video slide show with separate audio narrations in English, French, and German. Based on its language preference and the system-language value in the SMIL file, RealPlayer determines which file to play:
<par>
<video src="rtsp://realserver.company.com/slides/seattle.rm"/>
<!--select audio based on RealPlayer language-->
<switch>
<audio src="english/seattle.ra" system-language="en"/>
<audio src="french/seattle.ra" system-language="fr"/>
<audio src="german/seattle.ra" system-language="gr"/>
</switch>
</par>
To take advantage of high bandwidth connections available to some users, you can encode different versions of your files for different bit rates. You then use the <switch> tag to define the choices RealPlayer can make based on its available bandwidth. As shown below, you group files 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.ra"/>
<video src="video/newsong1.rm"/>
<textstream src="lyrics/newsong1.rt"/>
</par>
<par system-bitrate=47000>
<!--for single isdn-->
<audio src="audio/newsong2.ra"/>
<video src="video/newsong2.rm"/>
<textstream src="lyrics/newsong2.rt"/>
</par>
<par system-bitrate=20000>
<!--for 28.8 modems-->
<audio src="audio/newsong3.ra"/>
<video src="video/newsong3.rm"/>
<textstream src="lyrics/newsong3.rt"/>
</par>
</switch>
Always list system bit rate 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 make sure that the last option satisfies the lowest bit rate 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.
With RealAudio or RealVideo files encoded for multiple bit rates, you may or may not need to use the <switch> tag:
If your presentation plays only one clip at a time, you do not need to specify a layout. Each clip automatically plays in the main RealPlayer window, the window resizing automatically for each new clip. When your presentation displays several clips at a time, however, you can define separate playback areas ("regions") within the main RealPlayer window through the <layout> tag:
When you lay out regions, you use a simple coordinate system measured across and down from the top, left-hand corner of RealPlayer's main window. Offset measurements are in pixels, with zero pixels as the default. The following example defines a root-layout region that sets the overall window size, and also defines two regions for displaying video and text:
<head>
<layout>
<root-layout background-color="maroon"
height="230" width="250"/>
<region id="videoregion" top="5" left="5"
height="180" width="240"/>
<region id="textregion" top="200" left="5"
height="20" width="240"/>
</layout>
</head>
You specify the size of the entire playback area with root-layout. You cannot play media files in the root-layout area, however. The example shown above creates a playback area 230 pixels high by 250 pixels wide. When the presentation begins, the RealPlayer main window expands to this size. Other regions measure their top and left offsets from the upper, left-hand corner of the root-layout area.
You create playback regions for media files with <region> tags. These regions must lay within the background area defined by root-layout. Any part of a region outside the background area is cut off. The example above shows two playback areas named "videoregion." and "textregion." Both areas are offset 5 pixels to the right of the background area's left edge. The video region displays 5 pixels down from the top of the root-layout area, and the text region displays 200 pixels down. The following figure illustrates this placement.
![]() |
Note |
Layout values expressed as percentages are not supported in this preview release. Use pixel values instead. |
Each region must specify a height and width in pixels. The media clip played in a region may be a different size than the region, however. In this case, you use the fit attribute to determine how RealPlayer fits the file to the region:
<region id="videoregion" top="5" left="5"
height="180" width="240" fit="meet"/>
The fit attribute uses one of the values described in the following table. Note that in no case will media display outside the region's boundaries.
![]() |
Note |
For this preview release, only the default value of "hidden" is supported for the fit attribute. |
When scaling media inside a region, keep in mind that different types of content scale with different results. A video scaled larger than its encoded size may not look good. Vector-based media such as RealFlash animation scale more easily to fit different region sizes, however.
In the SMIL layout, you can specify background colors for any region:
<layout>
<root-layout id="background" background-color="maroon"/>
<region id="videoregion" background-color="silver".../>
<region id="textregion" background-color="#C2EBD7".../>
</layout>
The default background color for all regions is black. When a media clip plays, it overlays and hides the background color for its region. The background color shows through, however, if the clip contains transparency.
For the color value, you can use any Red/Green/Blue hexadecimal value (#RRGGBB) supported by HTML, as well as one of the following predefined color names, listed here with their corresponding hexadecimal values:
![]() |
Note |
For this preview release, background colors are supported only for the root-layout area. |
If regions overlap, you can determine which regions appear in front with the z-index attribute. The following example creates a video region that overlaps an image region:
<head>
<layout>
<root-layout background-color="gray"
height="220" width="280"/>
<region id="imageregion" top="10" left="10"
height="200" width="260" z-index="0"/>
<region id="videoregion" top="20" left="20"
height="180" width="240" z-index="1"/>
</layout>
</head>
This example defines a gray root-layout area 220 pixels high by 280 pixels wide. A smaller image region is centered within this gray background. Its z-index of zero makes it display behind all other regions, but not behind the root-layout area. The video region centered in the image region appears on top of that region because of its higher z-index value. Another region could overlap the video region by using a z-index of 2 (or 5, or 8, or 29, for instance).
Here are points to observe when using the z-index:
After you define the layout in the header section, you use region attributes within the source tags to attach each source to a region:
<body>
<par>
<video src="video.rm" region="videoregion"/>
<audio src="audio.ra"/>
<textstream src="text.rt" region="textregion"/>
</par>
</body>
In the example above, the video and text files are assigned to the video and text regions defined in the header. 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 files to regions at all because audio does not require a display area.
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 main RealPlayer window. The stock ticker region appears below them.
<smil>
<head>
<!--presentation with 2 text files and 1 video file-->
<meta name="title" content="Music of the Week"/>
<layout>
<root-layout height="165" width="430"/>
<region id="newsregion" top="0" left="0" height="144" width="250"/>
<region id="videoregion" top="0" left="250" height="144" width="180"/>
<region id="stockregion" top="145" left="0" height="20"width="430"/>
</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 shows the design of these regions.