Chapter 3: RealSystem: SMIL 2.0

Example 1 - Basic SMIL playlist with regions.
Example 2 - Adding metadata, inserts and images to a SMIL file.
Example 3 - Using proprietary RealOne SMIL Tags.

Links: RealOne Player SMIL 2.0

	RealNetworks Production Guide Get detailed information about authoring SMIL presentation for RealOne Player. Go
	SMIL Tag Summary RealNetworks Production Guide - all supported SMIL tags of RealOne Player. Go
	W3C SMIL Recommendation The official definition of SMIL 2.0 by the W3C. Go

Example 1 - Basic SMIL playlist with regions.

This first example shows how a simple SMIL playlist with video elements can be done. The first 60 seconds of each video are played sequentally in the region “r1“. Additionally the first 30/60 seconds of video two and three are skipped.

Source code:

See it in action.

Example 2 - Adding metadata, inserts and images to a SMIL file.

Now we add metadata to the presentation and the videos. Also we use a transparent PNG image as a title on the video and show it for 15 seconds at the beginning of the presentation. For the text inserts at the beginning of every video ”Inline Text” is used.

Source code:

<meta name="title" content="SMIL Playlist"/>
<meta name="author" content="Tobias Kuenkel"/>
<meta name="copyright" content="(c)2003 Tobias Kuenkel"/>

<layout>

<root-layout width="320" height="240" background-color="black" />
<region id="r1" left="0" top="0" width="320" height="240" fit="fill" z-index="1"/>
<region id="r2" left="0" top="200" width="320" height="40" z-index="3"/>
<region id="r3" left="0" top="0" width="320" height="77" z-index="2" /> </layout>
</head>

<body>

<par>

<img src="/media/smilex1.png" alt="SMIL Example 1" region="r3" begin="1s" dur="12s">

<area href="http://www.w3.org/AudioVideo/" external="true"/>
<param name="bitrate" value="3000"/>
</img> <seq>

<par>

<text src="data:,This%20is%20the%20first%20of%20three%20clips" region="r2" begin="15s" dur="10s">

<param name="fontPtSize" value="24"/>
<param name="fontWeight" value="bold"/>
<param name="fontColor" value="#3399ff"/>
<param name="backgroundColor" value="#0000cc"/>
<param name="hAlign" value="center"/>
</text>
<video src="/media/realvideo8_sure.ram" region="r1" dur="60s" title="The 1. of 3 clips"/>
</par>
<par>

<text src="data:,This%20is%20the%20second%20of%20three%20clips" region="r2" begin="5s" dur="10s">

<param name="fontPtSize" value="24"/>
<param name="fontWeight" value="bold"/>
<param name="fontColor" value="#3399ff"/>
<param name="backgroundColor" value="#0000cc"/>
<param name="hAlign" value="center"/>
</text>
<video src="/media/realvideo8_sure1.ram" region="r1" begin="30s" dur="60s" title="The 2.of 3 clips" author="Tobias Kuenkel"/>
</par>
<par>

<text src="data:,This%20is%20the%20last%20of%20three%20clips" region="r2" begin="5s" dur="10s">

<param name="fontPtSize" value="24"/>
<param name="fontWeight" value="bold"/>
<param name="fontColor" value="#3399ff"/>
<param name="backgroundColor" value="#0000cc"/>
<param name="hAlign" value="center"/>
</text>
<video src="/media/realvideo8_sure2.ram" region="r1" begin="60s" dur="60s" title="The last clip" copyright="(c)2003" abstract="This is the last clip of the SMIL example"/>
</par>
</seq>
</par>
</body>
</smil>

See it in action.

Example 3 - Using proprietary RealOne SMIL Tags.

SMIL can be customized, and RealNetworks has developed many extensions to SMIL 2.0 functionality. The following attributes are proprietary extension of SMIL 2.0 in RealOne Player:

rn:backgroundOpacity	Adjusts background opacity of images. (in percent)
rn:chromaKey	Turns selected color of an image transparent. (color_value)
rn:chromaKeyOpacity	Adds opacity to rn:chromaKey. (in percent)
rn:mediaOpacity	Adjusts overall transparency of an image or video. (in percent)
rn:sendTo	Used with hyperlinks: specifies a browser window that opens the HTML page. (_osdefaultbrowser\|_rpbrowser\|_rpcontextwin)