RealNetworks.com > Code Samples: SMIL Part 2

The following sample files demonstrate various hyperlinking possibilities.

WEB PAGE HYPERLINKS
Using SMIL, you can easily link RealOne Player to a Web page that opens on a click, a keystroke, or automatically at a certain time.

Sample File	Description	Feature Illustrated	Reference
overview.htm	A demonstration of the many ways to use SMIL to launch HTML pages.	RealOne Player related info and media browser panes; using SMIL to open URLs automatically	click here
browserlink.smil	An HTML page opens and pauses the video when you click the video.	minimal requirements for opening a Web page: <area/> tag with the external="true" attribute	click here
arealinks.smil	Each quadrant of the video links to a separate HTML page. The video pauses when you open a link.	image map created through <area/> tags, along with the sourcePlaystate="pause" attribute	click here
timedlinks.smil	The video clip links to four different HTML pages at different times.	begin and end attributes in an <area/> tag	click here
timedlinks2.smil	An audio clip links to four different HTML pages that automatically open in secondary browsing windows at different times.	begin attributes in an <area/> tag, along with actuate="onLoad"	click here
accesskeylinks.smil	A video links to four different HTML pages that you can display by pressing 1, 2, 3, or 4. The video continues to play when you open a page.	rectangular hot spots created with the <area/> tag, along with the accesskey and sourcePlaystate="play" attributes	click here

RELATED INFO PANE HYPERLINKS
The related info pane displays HTML pages next to a playing presentation.

Sample File	Description	Feature Illustrated	Reference
basiccontext.smil	An HTML page opens automatically in the related info pane when the video starts.	rn:sendTo="_rpcontextwin" attribute, and actuate="onLoad"	click here
timedcontext.smil	Four HTML pages open in the related info pane automatically at different times as a video plays.	begin attributes in related info pane links	click here
multilinks.smil	Four static clips display in the main media playback pane. Clicking each clip displays a different HTML page in the related info pane.	interactive begin attributes in related info pane links	click here
openatstart.smil	If the media browser pane is attached, the video appears flush left, leaving room for a related info page that opens later.	rn:contextWindow="openAtStart"	click here
closedatstart.smil	If the media browser pane is attached, the video appears centered at first, then moves to the left when the related info page opens.	default behavior without rn:contextWindow="openAtStart"	click here

STREAMING MEDIA HYPERLINKS
Of course, you can also link a streaming presentation to another streaming presentation.

Sample File	Description	Feature Illustrated	Reference
playerreplace.smil	Clicking the video replaces it with another video.	basic <area/> tag functionality	click here
playernew.smil	Clicking the video opens a second video in a new window and keeps the first video playing.	show="new" attribute in the <area/> tag	click here
playerpause.smil	Clicking the video opens a second video in a new window and pauses the first video.	sourcePlaystate="pause" and destinationPlaystate="play" attributes	click here
selffragment.smil	A sequence of videos plays. Each numbered button links to a separate video through a SMIL fragment.	SMIL fragment linking through href="#target" in an <area/> tag	click here
destinationlevel.smil	Two hypertext links play a video at half or double volume.	destinationLevel attribute for controlling audio levels	click here

The following sample files demonstrate SMIL layout tags, attributes, and features.

LAYOUT FEATURES

Sample File	Description	Feature Illustrated	Reference
videographic.smil	A video appears in the center of a static image background.	region stacking, clip centering	click here
threeclips.smil	Three clips play side-by-side.	side-by-side region layout	click here
logo.smil	A GIF logo rendered semi-transparent appears in the corner of a video clip. An animation makes the logo opaque on a mouseover.	subregions and the rn:mediaOpacity attribute	click here click here
subregioncolor.smil	Two clips play in sequence. When the second clip starts, the region background color changes.	backgroundColor in a clip source tag	click here
audiovolume.smil	An eight-second portion of an audio clip plays three times, the first time at normal volume, then double volume, then half volume.	soundLevel attribute in a <region/> tag	click here

SECONDARY MEDIA WINDOWS
The following samples demonstrate secondary, pop-up windows.

Sample File	Description	Feature Illustrated	Reference
toplayout.smil	A video plays in the main media playback pane as a series of clips displays in a secondary media playback window. The secondary media playback window opens only when a clip displays in it.	open="whenActive" and close="whenNotActive" attributes in a <topLayout> tag	click here
toplayout2.smil	The same as the preceding, but the secondary media playback window stays open for the entire presentation.	open="onStart" and close="onRequest" attributes in a <topLayout> tag	click here
videonotes2.smil	The same as videonotes.smil, but with the RealText clip launched in a secondary media playback window.	secondary media playback window using RealText	click here
threeclips2.smil	The same as threeclips.smil, but one of the clips plays in a secondary media playback window.	secondary media playback window using RealText	click here

REGION RESIZING
The customized rn:resizeBehavior="percentOnly" attribute lets you control how media clips resize if you click and drag the lower-right corner of the RealOne Player, for example, or view a presentation in double-size mode. The following samples use the same two clips to demonstrate a few of the many possibilities.

Sample File	Description	Feature Illustrated	Reference
resizeon.smil	Two clips appear side-by-side. They scale with the media playback pane when the pane is resized.	default behavior if rn:resizeBehavior is not used	click here
resizeoff1.smil	The same as the preceding, except that the clips do not scale.	rn:resizeBehavior="percentOnly" used with regions defined wholly through pixel values	click here
resizeoff2.smil	As with the preceding sample, the clips do not scale in size, but their relative distance increases as you make the pane larger.	left and top offsets for the first region, right and bottom for the second region	click here
resizeoff3.smil	The same as the preceding sample, but different offsets are used so that the images cross paths as you expand the media playback pane.	right and top offsets for the first region, left and bottom for the second region	click here
resizemixed1.smil	The first image stays stationary, but the second image expands and moves as you increase the size of the media playback pane.	one region defined with pixels, the other region defined with percentages	click here
resizemixed2.smil	The same as the preceding sample, except that the second image does not move away from the first image when you resize the media playback pane.	one region defined with pixels, the other region defined with a mix of pixels and percentages	click here

THE FIT ATTRIBUTE
The fit attribute in a <region/> tag determines how clips fit regions when the two are different sizes.

Sample File	Description	Feature Illustrated	Reference
fithidden.smil	A static clip displays in four regions that have different size and aspect ratios. Each region uses fit="hidden" (the default fit value).	fit="hidden" in <region/> tags	click here
fitfill.smil	The same as the preceding sample, but with fit="fill" used in all regions.	fit="fill" in <region/> tags	click here
fitmeet.smil	The same as the preceding sample, but with fit="meet" used in all regions.	fit="meet" in <region/> tags	click here
fitslice.smil	The same as the preceding sample, but with fit="slice" used in all regions.	fit="slice" in <region/> tags	click here
fitscroll.smil	The same as the preceding sample, but with fit="scroll" used in all regions.	fit="scroll" in <region/> tags	click here
quadrant.smil	The same image displays in four quadrants of a region. In each quadrant, it uses a different fit value.	four fit values compared	click here
letterbox.smil	A RealText clip using a 2.35:1 aspect ratio displays in a SMIL playback region using a 4:3 aspect ratio.	fit="meet" used to create a letterbox effect	click here

REGISTRATION POINTS
Registration points let you easily place clips anywhere in a region. The use of the fit attribute along with registration point regAlign values can create complex layout results, though.

Sample File	Description	Feature Illustrated	Reference
regalign.smil	A demonstration of common ways to align a clip within a region.	regPoint and regAlign attributes in clip source tags	click here
alignfithidden.smil	A demonstration of how a region's fit="hidden" value (the default) affects a clip when it aligns in various ways to a registration point.	fit="hidden" along with a stationary regPoint value and changing regAlign values	click here
alignfitfill.smil	The same as the preceding sample, but with fit="fill" used in the region.	fit="fill" along with a stationary regPoint value and changing regAlign values	click here
alignfitmeet.smil	The same as the preceding sample, but with fit="meet" used in the region.	fit="meet" along with a stationary regPoint value and changing regAlign values	click here
alignfitslice.smil	The same as the preceding sample, but with fit="slice" used in the region.	fit="slice" along with a stationary regPoint value and changing regAlign values	click here

LANGUAGE SWITCHING
RealOne Player users can set preferences for a specific language when they install RealOne Player. They can also change the preference by giving the Tools>Preferences command, then choosing the Content tab. These preferences correspond to codes defined in the systemLanguage attribute.

Sample File	Description	Feature Illustrated	Reference
languageswitch.smil	Semi-transparent French or Spanish subtitles overlay a video if you set your RealOne Player language preference to any variation of French or Spanish.	systemLanguage attribute using multiple clips and inline switching, along with the rn:backgroundOpacity attribute for RealText clips	click here
languageswitch2.smil	Similar to the preceding sample, the subtitles are opaque and display below the video clip.	systemLanguage attribute using multiple clips and inline switching	click here
contextswitch.smil	Different SMIL files play if you set your RealOne Player language preference to French, Spanish, Swedish, or Japanese.	master SMIL file used to switch between referenced SMIL files	click here
smilswitch.smil	The same clip plays, but a different related info page appears if you set your RealOne Player language preference to French, Spanish, Japanese, or Swedish.	systemLanguage attribute on multiple <area/> tags in a <switch/> group	click here

SYSTEM CAPTIONS SWITCHING
Hearing-impaired viewers can set a RealOne Player preference to display captions. The following samples demonstrate several ways to add system captions using RealText. The captions display only when you turn on captions display in the RealOne Player Contents preference (Tools>Preferences>Content).

Sample File	Description	Feature Illustrated	Reference
videocaptions1.smil	RealText captions with a semi-transparent background overlay a video only if the captions preference is on.	systemCaptions attribute and overlaying regions	click here
videocaptions2.smil	RealText captions appear beneath the video. If the captions preference is off, a filler clip appears in place of the captions.	systemCaptions attribute and side-by-side regions	click here
videocaptions3.smil	The video's playback area resizes and includes the captions area only if the captions preference is on.	systemCaptions attribute and multiple layouts in a <switch> group	click here
videocaptions4.smil	Similar to the preceding sample, this sample includes buttons that cycle the captions between three different sizes.	<set/> animation tags that resize the captions region	click here

PLAYER VERSION CHECKING
Using SMIL 1.0 attributes, you can check whether the viewer is using RealOne Player, or RealPlayer 7 or 8. This lets you add SMIL 2.0 features for RealOne Player, while keeping the presentation compatible with RealPlayer 7 and 8.

Sample File	Description	Feature Illustrated	Reference
compatible.smil	In RealPlayer 7 or 8, a video plays. In RealOne Player, a semi-transparent logo overlays the video.	system-required and systemComponent attributes	click here

SIMPLE TIMING
The following sample files explain and demonstrate the basic SMIL timing attributes.

Sample File	Description	Feature Illustrated	Reference
beginsample.smil	A demonstration of how the begin attribute affects a video's start time.	begin attribute	click here
clipbeginsample.smil	A demonstration of how clipBegin and clipEnd attributes affect how much of a video clip plays.	clipBegin and clipEnd attributes	click here
dursample.smil	A demonstration of how the dur attribute affects how long a video clip plays.	dur attribute	click here
gifrepeat.smil	A continuously looping animated GIF first plays. The same GIF repeats with its native looping stripped out, and SMIL timing used to set each loop cycle.	dur attribute, basic hyperlinking	click here
previewclip.smil	Three short video previews play in sequence. Clicking a preview launches the full clip in a separate window and pauses the preview window.	dur attribute, basic hyperlinking	click here click here

ADVANCED TIMING
The sample files listed in the following table demonstrate advanced timing features that build on basic timing concepts.

Sample File	Description	Feature Illustrated	Reference
syncbase1.smil syncbase2.smil	Two samples with identical playback: three videos play in sequence, while a different image displays next to each video. The first sample uses basic SMIL timing. The second sample uses a different organization with advanced SMIL timing.	comparison of simple timing with advanced begin and endEvent attributes	click here
videoselect.smil	A different video plays when you click one of three images.	<excl> group combined with the activateEvent attribute	click here click here
videoselect2.smil	Similar to videoselect.smil, clicking a link also opens an HTML page.	activateEvent Used with the ID of an <area/> link	click here
repeat1.smil	A different image appears each time a video clip repeats.	repeat(n) attributes used with begin and end timing attributes	click here
mouseover1.smil	A graphic image's background color changes when you move the screen pointer over it.	SMIL animation used with inBoundsEvent and outOfBoundsEvent attributes	click here
mouseover2.smil	Moving the screen pointer over an image displays a different image. Moving the screen pointer off the new image redisplays the first image.	SMIL z-index animations used with inBoundsEvent and outOfBoundsEvent attributes	click here
textcolors.smil	A demonstration of SMIL advanced timing and the RealNetworks transparency extensions used along with static RealText clips.	RealText clips and transparency attributes, along with the SMIL activateEvent, inBoundsEvent, and outOfBoundsEvent attributes	click here
restartalways.smil	Clicking an image restarts a video clip anytime, even while it is already playing.	restartDefault="always" in an exclusive group	click here
restartnotactive.smil	Clicking an image starts a video clip playing only if it is not playing already.	restartDefault="whenNotActive" in an exclusive group	click here
restartnever.smil	Clicking an image starts a video clip playing. After the first playback, however, the clip will not play again.	restartDefault="never" in an exclusive group	click here

TRANSITION EFFECTS TYPES AND SUBTYPES
Transition effects fall into familes, such as edge wipe effects and iris effects. Each family consists of several transition types, and each type has several subtypes.

Sample File	Description	Feature Illustrated	Reference
edgewipes.smil edgewipes_reverse.smil	Demonstrations of all edge wipe transition effects running forward and reverse.	edge wipe type and subtype attributes, as well as the direction="reverse" attribute	click here
iriswipes.smil iriswipes_reverse.smil	Demonstrations of all iris wipe transition effects running forward and reverse.	iris wipe type and subtype attributes, as well as the direction="reverse" attribute	click here
clockwipes.smil clockwipes_reverse.smil	Demonstrations of all clock wipe transition effects running forward and reverse.	clock wipe type and subtype attributes, as well as the direction="reverse" attribute	click here
matrixwipes.smil matrixwipes_reverse.smil	Demonstrations of all matrix wipe transition effects running forward and reverse.	matrix wipe type and subtype attributes, as well as the direction="reverse" attribute	click here
fadeslide.smil	A demonstration of all fade slide wipe transition effects.	fade and slide wipe type and subtype attributes	click here

MODIFIED AND APPLIED TRANSITION EFFECTS
The following samples show how to apply transition effects to clips. They also demonstrate attributes that can modify the appearance of basic transition effects.

Sample File	Description	Feature Illustrated	Reference
colorfade.smil	Two videos play in sequence. During each transition, there is a fade to or from a solid blue.	transIn and transOut attributes	click here
crossfade.smil	Two videos play in sequence, crossfading during the transition between them.	fill="transition" attribute	click here
brushtransition.smil	Transition effects using brush objects simulate dynamically changing region background colors after two video clips play.	<brush/> tags and transition effects in a sequence of videos	click here
partialtransitions.smil	Several transitions between still images demonstrate special effects that you can create with partial transition effects.	startProgress and endProgress attributes	click here
repeatingtransitions.smil	Several transitions between still images show how you can repeat transition effects horizontally and vertically.	horzRepeat and vertRepeat attributes	click here
border.smil	Several transitions between still images illustrate enlarged, colored, and blurred borders.	borderWidth and borderColor attributes	click here
instantiris.smil	A partial, instantaneous transition effect that remains for the clip duration mimics an old film projector.	startProgress, endProgress, borderWidth, and borderColor attributes	click here
clicktrans.smil	Four images appear. Clicking an image "uncovers" another image through a radial transition.	transitions used with advanced SMIL timing	click here

Support