When you stream more than one clip, you use SMIL to lay out the presentation. The layout defines where each clip appears in RealOne Player. Clips might appear side by side, for example, or stacked on top of each other. You can even play clips in windows that pop up from the RealOne Player main media playback pane.
![]() |
Note: For instructions on laying out a presentation in a Web page instead of in RealOne Player, see Chapter 20. |
If your presentation is audio-only, or it displays just one clip, you do not need to create a layout. However, if you want to play successive clips in the same area, or if your presentation displays multiple clips together, you need to define a layout. The following sections provide an overview of the main layout features.
You define a presentation's layout in a SMIL file's header section. You first create one (and only one) root-layout area, which sets the size of the main media playback pane when the presentation starts. This size stays constant throughout the presentation unless the viewer manually resizes the pane, or you change the root-layout size using a SMIL animation. You cannot play any clips in the root-layout area, but you can set its color.
![]() |
For More Information: The section "Defining the Main Media Playback Pane" explains how to set up the root-layout area. |
Each clip plays in a rectangular region. Within the main media playback pane, all regions lay within the root-layout area. You might define just one region that's the same size as the root-layout area, or you might set up multiple regions. 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.
![]() |
For More Information: See "Defining Playback Regions" for information about setting up regions. |
Within each region you can also create subregions, which fall within their containing region, just as a region within the main media playback pane falls within the root-layout area. A subregion automatically moves if its containing region's position changes. Using a subregion, for example, you can mimic a television channel in which a small, partially transparent channel logo appears in a corner, hovering above the content.
![]() |
For More Information: See "Defining Subregions" for more information on subregions. |
Popping up above the main media playback pane, a secondary media window can be moved, resized, and closed independently. You can use a secondary media playback window to display RealText credits for a video playing in the main media playback pane, for example. As with the main media playback pane, you can divide a secondary media playback window into separate playback regions. A secondary media playback window can open when the presentation starts, or when a certain clip starts to play. All clips playing in the main media playback pane and the secondary media playback windows are part of the same timeline defined within a single SMIL file.
To open a new window based on viewer input, you create hypertext links to other SMIL files in your presentation. When the viewer clicks a hypertext link, RealOne Player launches a new, linked window (rather than a secondary media playback window) that plays a new SMIL presentation and either stops or pauses the clips in the main media playback pane. The following table describes the differences between using a secondary pop-up window and a hyperlinked pop-up window.
![]() |
For More Information: Chapter 15 explains hyperlinking. |
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 to align a clip to different points within a region (clip position), as well as resize the clip to make it fit the region (clip fit) better.
To define clip position, you create various registration points that specify where and how clips align to regions. One registration point might center clips in their regions, for example. Another point might align clips with their regions' bottom-left corners. The following figure illustrates two registration points, showing a few of the many ways to align clips to a point.
![]() |
For More Information: The section "Positioning Clips in Regions" explains how to specify clip positions. |
The clip fit determines what happens when a clip is larger or smaller than its region. When a clip does not fit a region, you can keep the clip its normal size, scale the clip larger or smaller, or even add scroll bars to handle large clips.
![]() |
For More Information: The section "Fitting Clips to Regions" explains how to control clip fit. |
SMIL provides many options for laying out presentations. In many cases, you can achieve the same visual layout by different methods, but some methods may provide more clip placement options, for example, or create a layout that's easier to modify. Before you lay out a presentation, make sure you understand the options available to you. The following sections will help you make choices based on the type of presentation you want to create.
![]() |
Tip: It may help to sketch the layout on paper or with illustration software. In your sketch, position the regions, subregions, and clips, noting their sizes and the thickness of any borders that should appear around them. |
Unless the viewer manually resizes the main media playback pane, it stays at the root-layout size for the duration of the presentation. Therefore, you need to make sure that the root-layout area is large enough to encompass all clips you plan to play. Calculate the root-layout size based on the sizes of clips that play together, as well as any borders you want to add.
Suppose 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:
When choosing a root-layout size, keep in mind that the RealOne Player menus and controls will appear around the main media playback pane. If you define a very large root-layout area, some parts of the main media playback pane, or some RealOne Player controls, may not appear on the viewer's screen. The smallest computer screen in general use is 640 pixels wide by 480 pixels high.
As described in "Controlling How a Presentation Initially Displays", you can make the presentation display at double-size or full-screen mode when it starts up. Doing this may affect how you define the root-layout area. For example, most computer screens have a width-to-height ratio of 4:3. Therefore, a root-layout area that also has a 4:3 ratio will scale best in full- screen mode.
A secondary pop-up window is a useful way to provide additional information in a presentation. You might use the window to provide hypertext links to other streaming presentations or Web pages, for example. A secondary media playback window also provides a way to work additional clips into your presentation without making the root-layout area too big.
Add secondary media playback windows with caution, though. Using too many secondary media playback windows may make the presentation cluttered and difficult for the viewer to follow. Keep in mind, too, that the viewer can close secondary media playback windows at any time. Once closed, these windows do not open again unless another clip is scheduled to play in them later, or the viewer replays the presentation. For this reason, you may not want to play crucial clips in secondary media playback windows.
![]() |
Tip: As with the root-layout area, calculate a secondary media playback window's height and width based on the sizes of clips that play together in the window, as well as any borders you want to add. |
Every visual clip must be assigned to a region, but 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 new clip to the same region, using registration points if necessary to align each clip to the region. When multiple clips play in parallel, though, RealNetworks recommends that you define a separate region (either a main region or a subregion) for each clip.
Any layout that uses subregions can be duplicated using just main regions. But using subregions simplifies certain layout tasks because subregions are associated with their containing regions. For example, if you move a region 10 pixels to the left in the root-layout area, all of its subregions automatically move with it. If the subregions were main regions instead, you'd have to change their layout attributes individually to keep them at the same relative position within the larger region.
If your regions and subregions are the same sizes as the clips that play in them, you do not need to create registration points. You may want to create registration points if regions are larger than clips, however and you don't want clips to align with the regions' upper-left corners.
Yes. Suppose you want to position a small clip somewhere within a large region. You could either apply a registration point to the region, or you could create a subregion inside the region.
The primary advantage of defining a registration point is that you can easily apply the point to multiple regions. To center several clips in several different regions, it's much easier to define a single registration point and apply it to the various regions than to create a subregion for each clip.
Defining a subregion for a smaller clip gives you more options in determining
how the clip appears within the region. You can set a specific subregion size,
for example, and specify how the clip scales within the subregion. If you want
multiple clips to overlap, you should use subregions because you can set the
clips' stacking order by using the subregions' z-index
attributes.
The following SMIL sample illustrates the functions and relationships of the
main layout tags. Layout markup goes in the SMIL header section, between
<layout>
and </layout>
tags:
<smil xmlns="http://www.w3.org/2001/SMIL20/Language"> |
![]() |
For More Information: For more on the SMIL header and body sections, see "Header and Body Sections". |
The simplest layout defines a size for the RealOne Player main media playback pane, and creates a single playback region for clips. More complex layouts can create multiple regions, and even launch secondary, pop-up windows. The following sections explain how to define and set the sizes for the main media playback pane, as well as any secondary media playback windows you want to use.
For every SMIL presentation that uses a layout, you use the <root-layout/>
tag
to set the main media playback pane's width and height in pixels. The <root-
layout/>
tag requires height
and width
attributes. An id="
ID
"
attribute is
optional, and is generally required only if you use SMIL animations to change
the pane size as the presentation plays. The following example creates a root-
layout area 320 pixels wide by 240 pixels high:
<layout> |
Because clips cannot play in the root-layout area, you need to define at least one region in addition to the root-layout area. In the following example, the single region automatically assumes the same size as the root-layout area:
<layout> |
![]() |
For More Information: "Defining Playback Regions" explains how to set region sizes and positions within the main media playback pane. "Adding Background Colors" tells how to set pane colors. |
To add secondary, pop-up windows to a presentation, you include <topLayout>
and </topLayout>
tags for each window you want to launch. As with the <root-
layout/>
tag, you specify the width and height of each secondary media
playback window in pixels. An id="
ID
"
attribute is optional, and is generally
required only for use with SMIL animations. The following example creates a
secondary media playback window 180 pixels wide by 120 pixels high, and
defines a single playback region of the same size:
<layout> |
![]() |
Note: Although functional, secondary media windows are currently plain windows that do not include the standard RealOne Player skin. |
![]() |
For More Information: See "Defining Playback Regions" for information on setting region sizes and positions. "Adding Background Colors" explains how to define a window color. |
A <topLayout>
tag can include open
and close
attributes that determine when
the secondary media playback window appears and disappears. The following
table describes the values these attributes can have. You can define one open
value, and one close
value, or leave these attributes out of the tag to use the
default values.
With the default values of open="onStart"
and close="onRequest"
, the secondary
media playback window opens when the presentation begins (even if no clips
play in the window immediately), and stays open until the viewer closes the
window or starts another presentation. A common alternative is to make the
window appear only when clips play in it, and close when those clips finish
playing:
<topLayout ... open="whenActive" close="whenNotActive"> |
![]() |
View it now!
(requirements for viewing this sample)
These samples keep the secondary media playback window open throughout the presentation, and open the secondary window only when clips play in it. |
close
attribute's value. If a clip is assigned to play in a secondary media playback window the viewer has closed, RealOne Player still processes the streaming clip, but it doesn't display the clip's visual content. It will play any audio content, however.<root-layout/>
area) appears.close="whenNotActive"
, a clip's fill
attribute can affect when the window closes. For more information, see "Setting a Fill".Viewers can resize the main media playback pane and secondary media
playback windows manually, or by choosing RealOne Player's double-size or
full-size mode. By default, all regions and clips resize accordingly. You can
change this behavior, though, to allow only regions (and hence the clips
within those regions) defined with percentage values to resize. In this case,
clips playing in regions defined with pixel values will not resize. To do this,
add the attribute rn:resizeBehavior="percentOnly"
to the <root-layout>
or
<topLayout>
tag:
<root-layout width="250" height="230" |
Using this attribute requires that you declare the following namespace in the
<smil>
tag:
xmlns:rn="http://features.real.com/2001/SMIL20/Extensions" |
![]() |
For More Information: "Defining Region Sizes and Positions" explains pixel and percentage values for regions. For background on customized attributes and namespaces, see "Using Customized SMIL Attributes". |
![]() |
View it now!
(requirements for viewing this sample)
These two samples demonstrate default behavior with resizing turned on, and with it turned off (that is, rn:resizeBehavior="percentOnly" is used with regions defined
wholly through pixel values). View the Sample Files page to see
more samples.
|
For the RealOne Player main media playback pane and each secondary media
playback window, you need to define at least one region where clips play. For
the main media playback pane, you define regions after the <root-layout/>
tag.
For secondary media playback windows, you define them between each
window's <topLayout>
and </topLayout>
tags. You create each region using a
<region/>
tag:
<layout> |
A <region/>
tag requires only a unique ID to create a region that expands to
the same size as the main or secondary media playback window. In most cases,
though, you'll want to create smaller regions and position them within the
window using other <region/>
tag attributes, which are described in the
following sections.
Every region must have a unique, user-defined ID in the form id="
ID
"
. You
assign clips to a region based on the region's ID. The following SMIL example
defines a region that uses video_region
as its ID:
<layout> |
Optionally, a region can include a name in the form regionName="
name
"
.
Unlike IDs, region names do not have to be unique. In fact, region names are
useful primarily when two or more regions share the same name. In this case,
you can assign the same clip to play in multiple regions by using the region
name rather than the region ID. The following is an example of a video clip
with a region name:
<region |
Although region names can be identical, no region name should be the same as a region ID. The following example is allowed because the IDs are unique even though the region names are identical:
<region id=" |
However, the following example is not allowed because the ID is not unique:
<region id="video_region1" regionName="video_region1"/> |
![]() |
For More Information: See "Playing the Same Clip in Multiple Regions" and "Example 3: Media Playback Pane Resized for Captions" for examples of assigning clips to regions based on the region name rather than the ID. The section "SMIL Tag ID Values" contains rules for specifying IDs. |
If you do not specify a region's size, the region becomes the same size as the window that contains it. For example, the following region expands to 320 pixels by 240 pixels, the same size as the main media playback pane:
<layout> |
In most cases, though, you'll want regions to be smaller than the window that contains them. This lets you place regions side-by-side, or use the window background color as a border around a region. The following figure illustrates how a region's size and position attributes control where the region appears within its window.
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.
![]() |
Note:
For size and position attributes, SMIL supports the use
of px to designate pixels, as in top="60px" . This provides
consistency with the Cascading Style Sheet 2 (CSS2) standard.
In SMIL, though, the px designation is not necessary. For
simplicity, this guide omits the px from pixel measurements.
|
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 in the window's upper-left corner. The bottom and right offsets from the window borders are set automatically based on the region's size and position. If the window 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 sizing attributes of the <root-layout/> or
<topLayout> tag that contains the region. With pixel
measurements, though, the region size remains stable.
|
This example shows a region placed in a window 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 window borders determine the region size. If the window 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 window'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 window's upper-left corner:
<region id="video_region" left="60" top="40" width="180" height="120"/> |
If the window 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 window 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 window the same
should you change the window 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 window'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 window's lower-right corner:
<region id="video_region" left="60" top="40"/> |
Typically, you'll need to define more that one region within a window 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 in its window.
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. 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%"/> |
![]() |
Note:
Whenever regions overlap, you should also define how
the regions stack with the z-index attribute. See "Stacking
Regions That Overlap" for more information.
|
<root-layout/>
or <topLayout>
area that contains them. Any part of a region defined to appear outside of its containing window 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.rn:resizeBehavior="percentOnly"
as described in "Controlling Resize Behavior", manually resize the RealOne Player window. If regions do not resize as expected, you may need to change some pixel values to percentages, or vice versa.<region/>
tag's soundLevel
attribute to control the relative volume of an audio clip. See "Controlling Audio Volume in a Region" for more information, and "Turning Down an Audio Clip's Volume" for an example.After you define the playback regions, you use region
attributes within clip
source tags to assign clips to regions based on the region's ID. In the following
example, the video and text clips are assigned to the video and text regions
defined in the header:
<smil xmlns="http://www.w3.org/2001/SMIL20/Language"> |
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. You don't need to assign audio-only clips to regions at all because audio does not display on the screen.
When you define multiple regions that overlap, you can use a z-index
attribute
in <region/>
tags to specify how regions stack. The following layout example
creates a video region that overlaps an image region:
<layout> |
In this example, the root-layout area is 220 pixels high by 280 pixels wide. The
smaller image region is centered on the root-layout area. Its z-index value of 0
makes it display behind all other regions, but not behind the root-layout area.
The video region centered on the image region appears in front of that region
because of its higher z-index
value. You could have another region overlap the
video region by setting its z-index
value to 2, 5, or 29, for instance. The
following figure illustrates these regions.
<root-layout/>
tag cannot have a z-index
attribute.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.By default, <root-layout/>
and <topLayout>
areas have a black background. All
regions and subregions are transparent. In a <root-layout/>
, <topLayout>
, 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 window or region that contains it. 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.
![]() |
For More Information: Appendix C explains the types of color values you can use with SMIL. |
![]() |
Tip: Using SMIL animation, you can change a region's background color as the presentation plays. See Chapter 17 for more information. |
By default, all background colors in all regions display when the presentation
starts. In some cases, though, 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".../> |
A SMIL region is fully transparent if you do not define its background color,
or you explicitly set backgroundColor="transparent"
in the <region/>
tag. You can
also make a region's background color partially transparent with the
customized attribute rn:opacity="
n
%"
:
<region id="region1" backgroundColor="blue" rn:opacity="50%".../> |
This attribute uses a percentage value from 0% (fully transparent) to 100%
(fully opaque). In the example above, the value of 50% makes the region
background a partially transparent blue. Using this attribute requires that you
declare the following namespace in the <smil>
tag:
xmlns:rn="http://features.real.com/2001/SMIL20/Extensions" |
![]() |
For More Information: You can modify transparency in clips, too. See "Modifying Clip Colors" for details. For background on customized attributes and namespaces, see "Using Customized SMIL Attributes". |
If a clip that contains transparency (such as a GIF image) plays in a transparent or partially 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:
RealOne Player can play 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 RealOne Player, however. Some clips that display transparency when rendered in a Web browser, for example, may not display transparency when played in RealOne Player.
![]() |
Tip:
To check if RealOne Player recognizes a clip's
transparency, open the clip in RealOne Player and see if the
window background shows through the clip's transparent
areas. You can also turn a clip's background color transparent
with rn:backgroundOpacity , as well as use rn:mediaOpacity to add
transparency to all colors in the clip. For more on these
attributes, see "Adjusting Clip Transparency and Opacity".
|
By adding backgroundColor
to a clip source tag, you can change the color of the
clip's playback region. Suppose that a region uses black as a background color,
and you want to play one clip in that region using a silver background instead.
Rather than define a new region, you can specify the color in the clip source
tag to modify the region color for as long as the clip is active:
<video src="..." region="video_region" |
![]() |
View it now!
(requirements for viewing this sample)
Play this sample to view a sequence in which the second image changes the region background color. |
When a region plays a clip that includes an audio track or sound effects, you
can change the clip's relative audio volume with the soundLevel
attribute:
<region soundLevel="125%".../> |
The sound level always uses a percentage value. The default value of 100% plays the audio at its recorded volume. A value of 50%, for example, plays the audio at half its normal volume, whereas a value of 200% plays the audio at twice its normal volume.
Note that the soundLevel
attribute controls only the relative volume of the
audio stream sent to the speakers. It does not change the general sound level
setting on the viewer's computer, which remains entirely under the viewer's
control. All sound level adjustments are subject to limitations in the computer
hardware.
![]() |
For More Information: See "Turning Down an Audio Clip's Volume" for an example of how to use this attribute to change the volume of an audio clip. |
![]() |
Tip:
Using a SMIL animation, you can dynamically adjust a
region's soundLevel attribute to fade a clip's volume in or out.
See Chapter 17 for more information.
|
![]() |
View it now!
(requirements for viewing this sample)
This sample plays an audio clip at normal, double, and half volume. |
A subregion functions exactly like a main region, except that it maintains its
position within its containing region if you reposition the containing region.
To create a subregion, you need to modify the containing region to use
<region>
and </region>
tags instead of a single <region/>
tag. You then create
the subregion between the containing region's <region>
and </region>
tags, as
shown in the following example, in which the subregion displays near the
containing region's lower-right corner:
<head> |
You lay out a subregion within its containing region using the attributes
described in "Defining Region Sizes and Positions". When you set these
attributes, keep in mind that the offset measurements of left
, right
, top
, and
bottom
are measured from the containing region's boundaries. The subregion
always falls completely within the containing region.
![]() |
For More Information:
See "Binary and Unary Tags" for
background information on converting a single <region/> tag
to its binary equivalent.
|
![]() |
View it now!
(requirements for viewing this sample)
This sample displays a semi-transparent logo in a subregion. For information on adding transparency to a clip, see "Adding Transparency to All Opaque Colors". Through SMIL animation, described in Chapter 17, the logo becomes opaque on a mouseover. |
<region/>
tag attribute, and it does not automatically inherit any attributes from the containing region. For example, if you use fit="fill"
in the containing region, and do not specify fit in the subregion, the subregion uses the default fit="hidden"
rather than fit="fill"
.backgroundColor="inherit"
. See "Adding Background Colors" for more on colors.<region id="regionA" z-index="1".../> |
In this example, the subregion z-index values of 1
and 2
have no relationship to the region z-index values of 1
and 2
. As a result, region B appears in front of region A because it has a higher z-index value. Within region B, subregion D appears in front of subregion C.
Defining subregions in the SMIL header section is useful if you plan to reuse the subregion for multiple clips. If you want to create a subregion for just one clip, though, you can define the region in the clip source tag:
<layout> |
In the preceding example, the video clip is assigned to an existing region, but
the inclusion of height
, width
, left
, and top
values defines a single-use
subregion within that region. Unlike a subregion defined in the <layout>
section, this single-use subregion does not require an ID value. The following
table lists all the region attributes that you can include in a clip source tag to
set a single-use subregion's properties.
Attribute | Function | Reference |
---|---|---|
backgroundColor |
Selects the subregion's background color. | click here |
bottom |
Sets the subregion's bottom offset. | click here |
fit |
Specifies how the clip fits its allotted space | click here |
height |
Specifies the subregion's height. | click here |
left |
Sets the subregion's left offset. | click here |
regAlign |
Aligns the clip to the registration point. | click here |
regPoint |
Defines the registration point for the subregion. | click here |
right |
Sets the subregion's right offset. | click here |
top |
Sets the subregion's top offset. | click here |
width |
Specifies the subregion's width. | click here |
z-index |
Sets stacking order relative to other subregions. | click here |
When you do not want a clip to align with a region's upper-left corner, you can create a registration point. For example, you might define a registration point that is 10 pixels in, and 5 pixels down, from the region's upper-right corner. A registration point also includes an alignment that determines which part of the clip is placed on the point. The alignment might place the midpoint of the clip's right border on the registration point, for instance.
Within a SMIL file you can define any number of registration points using either or both of the following methods:
Although simpler, this method limits you to placing each clip near the center of a region, or along the region border. Plus, you must define each registration point separately in each clip tag. The section "Defining Registration Points in Clip Source Tags" explains this method.
<regPoint/>
tags in the layout section, then assign the points to clips.Although slightly more complex, this method is more powerful. It lets you place a clip anywhere within a region, and you can reuse each registration point in any number of clips. The section "Creating a Reusable Registration Point" explains how to use this method.
No matter which method you use to define registration points, you choose
one of nine values to align a clip to a region: topLeft
, topMid
, topRight
, midLeft
,
center
, midRight
, bottomLeft
, bottomMid
, or bottomRight
. The following figure
illustrates where these values fall on a clip:
To define a registration point within a clip source tag, you add regPoint
and
regAlign
attributes to the tag. Both regPoint
and regAlign
use an alignment
value as described in the preceding section, but 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 following values center the clip in its region, regardless of the region's size and shape:
<ref src="..." region="video_region" regPoint="center" regAlign="center"/> |
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="..." region="video_region" regPoint="bottomRight" regAlign="midRight"/> |
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 using this method.
Not all possibilities are useful, though. Consider this alignment:
<ref src="..." region="video_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 this sample to see the basic registration point alignments described in the preceding table. |
Using the second method for creating registration points, you define each
registration point in the layout section with a <regPoint/>
tag. As shown in the
following example, a <regPoint/>
tag has a unique ID, a few positioning
attributes, and a regAlign
attribute:
<layout> |
The preceding <regPoint/>
tag creates a registration point halfway in from the
left, and a quarter of the way down from the top, of any region. The regAlign
value, described in "Using Alignment Values", places the midpoint of the
clip's top border on the registration point.
A <regPoint/>
tag's left
, right
, top
, and bottom
attributes, which can have pixel
or percentage values just like region offset values, allow you to place the
registration point anywhere in a region. You need to use only one or two of
these attributes (such as left
and top
, or right
and bottom
) to define a
registration point's position. The following table summarizes these attributes.
Once you define a registration point in the layout section, you assign the
point to any number of clips by adding a regPoint
attribute to each clip source
tag. This attribute takes as its value the ID of the <regPoint/>
tag. For example,
if you defined this registration point:
<regPoint id="above_center" left="50%" top="25%" regAlign="topMid"/> |
you use the following regPoint
attribute in the clip source tag:
<ref src="..." region="video_region" regPoint="above_center" .../> |
In the clip source tag, you can even override the regAlign
value defined for the
registration point. Suppose that for one clip you want to use regAlign="center"
instead of the defined regAlign="topMid"
. You can simply add the new regAlign
value to the clip tag, rather than define a new registration point:
<ref src="..." region="region2" regPoint="above_center" |
![]() |
Note:
You cannot override a registration point's position
attributes, such as left and top , through a clip source tag.
|
Using <regPoint/>
tags, you can replicate any registration point definable
through clip source tags. The following table shows how to create common
registration point alignments with values in a <regPoint/>
tag rather than with
attributes in clip source tags. Note that although left
and top
attributes are
used, you could define the same registration points using right
and bottom
.
topLeft
, as an ID in a <regPoint/>
tag. Any variation, such as id="alignTopLeft"
is OK, however. For information about IDs, see "SMIL Tag ID Values".<region/>
tags. <regPoint/>
tags are not associated directly with <region/>
tags. They affect regions only through the clips that play in those regions. In other words, you assign registration points to clips, and clips to regions.left="10"
and top="15%"
, for example.<regPoint/>
tag for any number of clips, it's better to use this method when you want to align many clips the same way. Once you define the <regPoint/>
tag, you just add the single regPoint="
ID
"
attribute to each clip tag, rather than both regPoint="
value
"
and regAlign="
value
"
.
|
These left
and top
attributes place the registration point at the region's lower-left corner. The regAlign
attribute places the clip's upper-right corner on the point. This locates the clip outside the region. Because a clip cannot display outside its region, the clip does not display at all.
fit
attribute can create many different outcomes for the placement and scaling of a visual clip. See the supplemental file align.htm
for more information about the interaction of regAlign
and fit
values.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, not a
<regPoint/>
tag, and it applies to a clip playing 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"
|
You can override a region's fit
attribute within a clip source tag. Suppose that
a certain region uses fit="fill"
, but you want to play one clip in that region and
use fit="hidden"
instead. You can simply add that fit
value to the clip source tag
to override the region's fit
value:
<video src="..." region="textregion" |
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 RealOne Player enlarges, shrinks, or distorts the clip.fit
attribute with a RealText clip, see "RealText Window Size and SMIL Region Size".fill
, meet
, or slice
value, a hot spot hyperlink (image map) defined with percentage values automatically resizes with the clip. For more information, see "Tips for Defining Hot Spots".fit
attribute can create many different outcomes for the placement and scaling of a visual clip. See the supplemental file align.htm
for more information about the interaction of regAlign
and fit
values.The following sections illustrate how to use layout tags and attributes to create various types of presentations. To see more examples, get the zipped HTML version of this guide as described in "How to Download This Guide to Your Computer", and view the Sample Files page.
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 z-index
attributes place the video
region in front of the image 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 aspect 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. |
Although audio-only clips are not typically assigned to regions, you can take
advantage of a region's soundLevel
attribute to change an audio clip's volume.
The following example cuts the volume of a background music clip. The single
playback region (1 pixel by 1 pixel) uses the soundLevel
attribute to turn down
the clip volume. Because the second clip is assigned to this region, RealOne
Player cuts that clip's audio level as it blends it with the first clip:
<smil xmlns="http://www.w3.org/2001/SMIL20/Language"> |
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 RealOne Player main media playback pane. The stock ticker region appears below them:
<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. |
A small change to the preceding example's layout can make one of the three clips display in a secondary, pop-up window. The following example places the stock ticker clip in a secondary media playback window that automatically opens when the presentation starts. The region that holds the stock ticker clip has no size and position information, so it automatically assumes the size of the secondary media playback window. The root-layout area's height has decreased, but within the SMIL body nothing has changed:
<smil xmlns="http://www.w3.org/2001/SMIL20/Language"> |
![]() |
View it now!
(requirements for viewing this sample)
Click this sample to view two clips played side-by- side, with the third clip in a secondary media playbackwindow. |
You normally assign a clip to a single region based on the region ID. Because each region ID must be unique, however you cannot assign the same clip to multiple regions by using region IDs. However, you can assign the same clip to two or more regions based on the region names. In the following example, the same video plays in two regions that appear size by side:
<smil xmlns="http://www.w3.org/2001/SMIL20/Language"> |
In the preceding example, the two regions share the same region name. When
it reads the <video/>
source clip tag, RealOne Player first looks for a region
with id="video"
. Because there is no such region, RealOne Player looks for a
region with regionName="video"
. In this example, it finds two regions with this
name, so it plays the same clip in both regions.
With this strategy, RealOne Player requests only one video clip from Helix
Universal Server. If you used two <video/>
source clips instead, RealOne Player
would request the same video stream twice, wasting bandwidth. Note, too,
that one region turns off the video's audio track with the soundLevel
attribute.
If two clips have audio tracks, RealOne Player blends the tracks. In this case,
that's unnecessary because the tracks are identical.
![]() |
©2002 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. |