When you stream more than one clip, you use SMIL to lay out the presentation. The layout defines where each clip appears in the RealPlayer media playback pane. Clips might appear side-by-side, for example, or stacked on top of each other. This chapter introduces you to SMIL's basic layout features. Before you create a layout, be sure to read "SMIL File Basics".
 |
Tip: If your presentation displays one clip or a sequence of clips, you may not need to create a layout. Without defining a layout, you can stream a sequence of clips as described in Chapter 7, and create HTML page hyperlinks as explained in Chapter 6. |
When you define a layout, you first create one (and only one) root-layout area, which sets the size of the RealPlayer media playback pane when the presentation starts. Because this size stays constant throughout the presentation, be sure that the root-layout area is large enough to encompass all of the clips that you plan to play at any point during the presentation.
Calculate the root-layout size based on the sizes of clips that play together, as well as any borders you want to add. When you select your root-layout size, keep the following in mind:
Suppose that you plan to display two clips, one 100 pixels wide and the other 200 pixels wide, side-by-side. If you want a five-pixel border around the clips, for example, the root-layout area needs to be 315 pixels wide:
The <root-layout/> tag falls between <layout> and </layout> tags within the
SMIL header section. The following example adds the layout section after the
<meta/> tags:
<smil xmlns="http://www.w3.org/2001/SMIL20/Language" |
The <root-layout/> tag requires height and width values in pixels. Because clips
cannot play in the root-layout area, you need to define at least one playback
region in addition to the root-layout area.
 |
For More Information: See "Creating Playback Regions". "Adding Background Colors" tells how to change the color of the root-layout area. |
When the media browser pane is attached, a SMIL presentation that plays
without an HTML page for the related info pane appears centered above the
media browser pane. (For an illustration of this, see "Media Playback Pane
Sizing".) If an HTML page later opens in the related info pane, the SMIL
presentation jumps to the left. To prevent this effect, which can be jarring for
the viewer, include rn:contextWindow="openAtStart" in the <root-layout/> tag:
<root-layout width="320" height="240" |
When you use this attribute, the SMIL presentation appears at the left side of
the top two panes. Any HTML pages then sent to the related info pane appear
at the right side. To prevent height resizing when an HTML page appears,
specify the same height for the related info pane that you use in the <root-
layout/> area. The rn:contextWindow attribute has no visible effect when the
media browser pane is detached.
 |
View it now!
(requirements for viewing this sample)
In RealPlayer, make sure that the media browser pane is attached. Then, play the first sample, which makes room for the related info pane when the presentation starts, placing the video flush left. The second sample does not use rn:contextWindow, so the video appears centered at first,
moving to the left when the related info pane opens.
|
Every visual clip must be assigned to a region, which is a rectangular area that lays within the root-layout area. You don't necessarily have to create a separate region for each clip. When you play a sequence of clips, for example, you can assign each clip to the same region. When multiple clips play in parallel, though, define a separate region for each clip. Although similar to HTML frames, SMIL regions can overlap, letting you play a clip in one region in front of a background image in another region, for example.
Just below the <root-layout/> tag, you define each region with a <region/> tag.
Each <region/> tag must have a unique, user-defined ID. The following sample
creates two regions that are the same size as the root-layout area. When
regions overlap, the region defined first in the SMIL mark-up appears behind
the region defined second, so the background region would appear behind the
video region:
<layout> |
In the preceding sample, you could display an image clip in the background region. Then, if the video is smaller than 320-by-240 pixels, you could center it within the video region. Because region backgrounds are transparent unless you specify otherwise, the background image will display around the video.
|
For More Information: For more on ID values, see "Tag ID Values". "Adding Background Colors" explains how to change region colors. |
In many cases, you'll need to specify region sizes to make them smaller than the root-layout area. This lets you play two clips side-by-side, for instance, or use the root-layout background color as a border around regions. The following figure illustrates how a region's size and position attributes control where the region appears.
The region size and position attributes constitute a simple coordinate system
measured in pixels or percentages. Because each attribute has a default value
of auto, you can leave it out of the <region/> tag to set its value automatically
based on the values of the other attributes. The result is that, in most cases,
you need to specify just one to four of the attributes listed in the following
table.
This example shows a region in which only the width and height are defined:
<region id="video_region" width="180" height="120"/> |
In this case, the region is placed at the root-layout area's upper-left corner. The bottom and right offsets from the root-layout borders are set automatically based on the region's size and position. If the root-layout area were 300 pixels wide by 200 pixels high, you could achieve the same layout using percentage values:
<region id="video_region" width="60%" height="60%"/> |
|
Tip:
With percentage values, the region changes size if you
modify the size of the <root-layout/> tag. With pixel
measurements, though, the region size remains stable.
|
This example shows a region placed in a root-layout area without specifying the region size:
<region id="video_region" left="60" right="60" top="40" bottom="40"/> |
In this case, the four offsets from the root-layout borders determine the region size. If the root-layout area were 300 pixels wide by 200 pixels high, the region would be 180 pixels wide (300-60-60=180) and 120 pixels high (200-40- 40=120). You could create the same layout with percentage values:
<region id="video_region" left="20%" right="20%" top="20%" bottom="20%"/> |
|
Tip: If you define a region size with these offset attributes, changing the root-layout area's size also changes the region's size whether the attributes use pixels or percentages. |
This example shows a common way to define region size and position. It specifies a region width and height, then sets the region's offset from the root- layout area's upper-left corner:
<region id="video_region" left="60" top="40" width="180" height="120"/> |
If the root-layout area were 300 pixels wide by 200 pixels high, the region layout would be the same as in "Layout Example 2: Four Region Offsets". Using pixel measurements for the region width and height, however, keeps the region size stable if you modify the root-layout size.
For this example, you could use the right and bottom attributes instead of left
and top to create the same layout:
<region id="video_region" right="60" bottom="40" width="180" height="120"/> |
You could also define this layout using percentage values for the left and top
offsets. This keeps the region's relative position within the root-layout area the
same should you change the root-layout size:
<region id="video_region" left="20%" top="20%" width="180" height="120"/> |
This example sets the region's size and position by specifying only the right
and bottom attributes:
<region id="video_region" right="60" bottom="40"/> |
Because neither the left nor the top attribute is defined, the region is placed in
the root-layout area's upper-left corner. The region's width and height expand
to meet the right and bottom offset values.
Alternatively, you could set the region's left and top attributes instead of right
and bottom to place the region at the root-layout area's lower-right corner:
<region id="video_region" left="60" top="40"/> |
Typically, you'll need to create more that one region to lay out clips that play
together. To do this, you define each region with a separate <region/> tag,
using any combination of size and position attributes to place each region
within the root-layout area.
This example shows two regions laid out so that a small stripe of the root-
layout background appears between the regions. Because vertical size or offset
values (top, height, or bottom) are not specified, each region is as tall as the
root-layout area:
<region id="region_1" right="55%"/> |
This example has one region in front of another, the region defined second appearing in front. There are many ways to define this layout with the size and position attributes. The following sample uses percentage values for the four border offsets:
<region id="region_1" top="5%" left="5%" bottom="5%" right="5%"/> |
<root-layout/> area that contains them. Any part of a region defined to appear outside of the root-layout area is cut off. For this reason, no percentage value can effectively be more than 100%.top and left attributes in percentages, for example, while specifying width and height in pixels.By default, the <root-layout/> area has a black background. All regions are
transparent. In a <root-layout/> or <region/> tag, you can specify a different
background color with the backgroundColor attribute, as shown in the
following example:
<layout> |
For the color value, you can use inherit to make the region use the same color
as the root-layout area. In the example above, the third region inherits maroon
as its background color. To set a color value explicitly, use a predefined color
name, a hexadecimal color value, or an RGB value. The following table lists the
predefined names, along with that color's corresponding hexadecimal and
RGB values.
By default, all region background colors display when the presentation starts.
In some cases, you may not want a region's background color to appear until a
clip plays in the region. To do this, add showBackground="whenActive" to the
<region/> tag:
<region id="region1" backgroundColor="silver" showBackground="whenActive".../> |
If a clip that contains transparency (such as a GIF image) plays in a transparent region, viewers will be able see through the clip's transparent areas to underlying regions and clips. The following clip types can include transparent areas:
Helix Server can stream other types of clips, too, and some of those clips may include transparency. Support for transparency for each clip type has to be built into RealPlayer, however. Some clips that display transparency when rendered in a Web browser, for example, may not display transparency when played in RealPlayer.
|
Tip: To check if RealPlayer recognizes a clip's transparency, open the clip in RealPlayer and see if the pane background shows through the clip's transparent areas. |
By default, a clip aligns with a region's upper-left corner and displays at its
normal size. If it's too big for the region, it's cropped. If it's too small, the
region's background color displays in the remainder of the region. You can
modify this behavior by defining registration points in clip source tags, and
adding a fit attribute to <region/> tags.
A registration point positions a clip within a region at a point other than the
region's upper-left corner. To define a registration point, you add regPoint and
regAlign attributes to a clip source tag. For example, the following values
center the clip in its region:
<video src="rtsp://helixserver.example.com/video1.rm" region="video_region" |
|
For More Information:
The section "Assigning Clips to Regions"
explains how the region attribute assigns a clip to a playback
region.
|
Both the regPoint and regAlign attributes use one of nine values to align a clip
within a region: topLeft, topMid, topRight, midLeft, center, midRight, bottomLeft,
bottomMid, or bottomRight. The following figure illustrates where these values
fall on a clip:
Although regAlign and regPoint both use the same alignment values, the values
have different meanings for the two attributes:
regPoint attribute determines where the registration point falls in the region (hence, the alignment value applies to the region, not to the clip).regAlign attribute specifies which part of the clip aligns to the registration point.For example, the next values select the region's lower-right corner, and place the clip's right midpoint at that corner. In this case, the clip's bottom half is cut off:
<ref src="rtsp://helixserver.example.com/video1.rm" |
Because you can use any of the nine predefined values for both regPoint and
regAlign, there are 81 possible ways to place clips in regions. Not all
possibilities are useful, though. Consider this alignment:
<ref src="..." region="..." regPoint="topLeft" regAlign="bottomRight"/> |
In the preceding example, regPoint="topLeft" puts the registration point at the
region's upper-left corner. The regAlign="bottomRight" attribute places the
clip's lower-right corner on the registration point. This locates the clip outside
the region. Because a clip cannot display outside its region, the clip does not
display at all.
The following table lists some of the more useful combinations of regPoint
and regAlign that you can include in a clip source tag.
|
View it now!
(requirements for viewing this sample)
Play the following sample to see the basic registration point alignments described in the preceding table. |
Whereas a registration point determines where a clip displays in a region, a fit
attribute specifies what happens when a clip is larger or smaller than its
allotted area. The various fit values determine whether resizing, distortion,
and cropping may occur. The fit attribute is part of a <region/> tag, and it
applies to a clip played in the region whether or not the clip uses a registration
point. The following example shows a fit attribute set in a <region/> tag:
<region id="video_region" width="128" height="64" |
The fit attribute uses one of the values described in the following table. The
table's last three columns indicate if the fit attribute value may scale, distort,
or crop the clip if it does not fit the region dimensions exactly.
The following illustration shows the effects that particular fit attribute values
have on a source clip played in regions with different sizes and aspect ratios.
Note that in some cases, based on the width-to-height ratio of the clip and the
width-to-height ratio of the region, certain fit values have nearly the same
effect. But display the same clip in a region with a different width-to-height
ratio, and the fit values can have very different effects.
|
View it now!
(requirements for viewing this sample)
This first sample lets you view how four different fit attribute
values affect the same clip as it displays in the four
quadrants of a region. The following samples show how the
various fit values affect a clip when it displays in regions that
have different sizes and aspect ratios: fit="fill"fit="hidden"fit="meet"fit="slice"fit="scroll"
|
fit="meet" if all parts of the clip must display, if the clip's aspect ratio must be maintained, and if it's OK to scale the clip.fit="hidden" or fit="scroll" to keep the clip at its encoded size.fit="fill" if you want to fill the entire region with the clip and it doesn't matter if RealPlayer enlarges, shrinks, or distorts the clip.After you define the playback regions, you use region attributes within clip
source tags to assign visual clips to regions based on the region's ID. (Audio
clips do not require playback regions.) In the following example, the video and
text clips are assigned to the video and text regions defined in the header. This
sample places clips in a parallel group, which the next section describes:
<smil xmlns="http://www.w3.org/2001/SMIL20/Language" |
You can play two or more clips at the same time by grouping the clip source
tags between <par> and </par> tags. In this case, you assign each clip to a
different playback region. The following example creates a parallel group that
plays a RealVideo clip along with a RealText clip in separate regions at the
same time. The group ends when the longer clip in the group stops playing:
<par> |
By default, a <par> group ends when all clips in the group finish playing. You
can modify this behavior with the endsync attribute. Suppose that a long clip
of background music plays in parallel with a shorter RealText clip. Using
endsync, you can stop the group when the RealText clip finishes, cutting off
the background music once the text has displayed. The endsync attribute has
no effect in <seq> tags or clip source tags.
Use endsync="first" in the <par> tag to stop the group when the first clip in the
group stops playing. (Note that "first" refers to playback times and not the
order that clips are listed in the group.) All other clips in the group stop
playing at that point, regardless of their playback statuses or any timing
parameters specified for them.
The attribute endsync="ID" causes the group to conclude when the designated
clip ends playback. All other clips in the group stop playing at that point,
regardless of their playback statuses or any timing parameters used with them.
The designated clip must have a corresponding id value in its source tag, as
illustrated in the following example:
<par |
|
For More Information: For more on clip ID values, see "Tag ID Values". |
The fill attribute, which uses three basic values of auto, remove, and freeze, is
useful with clips that play in parallel groups. If a group lasts longer than a
clip, use fill="remove" in the clip source tag to remove the clip when it finishes
playing. A fill="freeze" value keeps the clip visible until the group completes.
In the following example, suppose that the video is longer than the RealText
clip. The fill="freeze" attribute in the RealText source tag keeps the final text
block visible after the clip finishes playing. The parallel group then ends with
the video clip finishes playing:
<par> |
If you do not set the fill value explicitly, the default value of fill="auto" is used.
This acts like a remove or a freeze value depending on whether timing
attributes are used:
dur attribute, the fill="auto" value is equivalent to fill="remove". For example, a video that uses a dur attribute disappears when the duration expires.dur attribute, the fill="auto" value is equivalent to fill="freeze". For example, the final frame of a video that does not use a dur attribute freezes until the group that contains the clip ends.You can stream still images, whether GIF, JPEG, or PNG, in parallel with other clips, using the images as buttons, banners, or ads, for example. Still images lack two characteristics that you find in a streaming media clip such as a video, though:
dur attribute, which is described in the section "Specifying a Duration", you can define the duration for each image.The following example shows a clip source tag for a still image. The <param/>
tag sets the image's streaming speed to 5000 bits per second, or approximately
5 Kbps. Note that using <param/> requires that you turn the <img/> tag into a
tag pair of <img> and </img>:
<img src="poster.jpg" region="image_region" dur="5s" fill="freeze"> |
 |
Note:
You see the effects of the bitrate parameter only when
streaming an image with Helix Server. The parameter does not
affect local playback of clips stored on your computer. When
images are on a Web server, the bitrate parameter has no effect,
and the images simply download as fast as possible, which may
interfere with other streaming clips playing in parallel.
|
<par> tag can include a title, author, or copyright attribute just like a clip source tag. For more information, see "Adding Clip or Group Information".<param/> tag's bitrate parameter. For example, a 10 Kilobyte file streaming at 20,000 bits per second takes a little over four seconds to stream ((10 x 8192)/20000)=4.1.dur in a <par> tag overrides endsync. In these cases, RealPlayer ends the group as specified by the dur attribute, not the endsync attribute.endsync="last" in a <par> group to end the group when the last clip finishes playing. (Here, "last" refers to playback times and not the order that clips are listed in the group.) Because endsync="last" is the group default, however, it is not necessary to add this attribute and value to the <par> tag explicitly.fit="fill" in a <region/> tag, as described in "Defining How Clips Fit Regions", and fill="freeze" or fill="remove" in a clip source tag. In the former case, fill is a value for the fit attribute, which affects clip sizing in regions. In the latter case, fill is an attribute that affects clip timing and appearance.One of the powerful features of SMIL is the ability to nest groups, which lets
you combine <seq> and <par> tags as needed to create any type of presentation.
The organization of these tags greatly affects the presentation playback,
though, and you need to be careful when creating nested groups. In the
following example, clip 1 plays first. When it finishes, clip 2 and clip 3 play
together. When both clip 2 and clip 3 have finished playing, clip 4 plays:
<seq> |
You get very different results, though, if you switch the <seq> and <par>
groupings. In the next example, clips 1, 2, and 4 all begin at the same time.
When clip 2 finishes, clip 3 starts:
<par> |
The following illustration shows the difference between these groupings.
The following sections illustrate how to use layout tags and attributes to create various types of presentations. Choose Sample Files from the pull-down menu to view all the playable sample files included in this guide.
This example centers a video clip in front of an image. Because region sizes are
not specified, the regions expand to the root-layout size. The registration point
centers the video clip within its region. The image region's fit="fill" attribute
expands the image to fill the entire region, distorting the image if the image
does not have the same width-to-height ratio as the region:
<smil xmlns="http://www.w3.org/2001/SMIL20/Language" |
|
Note: SMIL provides no way to tile an image throughout a region. |
|
View it now!
(requirements for viewing this sample)
Play this sample to view a video centered on a graphic image. |
A wide screen movie displays on most television sets in a letterbox format, in
which blank areas display above and below the movie. As shown in the
following example, you can achieve the same effect for a clip that has a width-
to-height ratio greater than its region's. Here, the video uses a registration
point that centers it in a region that uses fit="meet" to scale the video up or
down in size until its left and right edges meet the region boundaries:
<smil xmlns="http://www.w3.org/2001/SMIL20/Language" |
|
View it now!
(requirements for viewing this sample)
This sample demonstrates the letterbox effect using a RealText clip. |
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 media playback pane. The stock ticker region
appears below them. The video uses a begin attribute to start it playing 15
seconds after the other clips have started.
<smil xmlns="http://www.w3.org/2001/SMIL20/Language" |
|
View it now!
(requirements for viewing this sample)
Click this sample to view three clips played side-by- side. |
SMIL 2.0 has even more layout features than those described in this chapter. If you download RealNetworks Production Guide from http://service.real.com/help/library/encoders.html, you'll find instructions for doing the following:
z-index attribute to define explicitly which region appears in front when regions overlap. This way, you do not need to rely on the order in which regions are defined within the SMIL file.regPoint and regAlign values in each clip source tag.
|
©2002, 2004 RealNetworks, Inc. All rights reserved.
For more information, visit RealNetworks Click here if the Table of Contents frame is not visible at the left side of your screen. |