| < smil > |
| < download examples > |
| < other resources > |
| < TransTool > |
Download SMIL examples
SMIL examples : The Fool's Mate
(c) Cognitive Development Laboratory, 2002
Installation
1. Install RealPlayer (www.real.com). You only need the free basic version (the link is a little hard to find on their website)
2. Download examples.zip (1.05 MB)
3. Unzip all the files to the same folder
Descriptions of Example Files
Media sources:
1. black.rm (camera view of player playing black pieces)
2. white.rm (camera view of player playing white pieces)
3. board.rm (camera view of the chess board)
4. voicetrack.rm (audio file with narration for the event)
SMIL and RealText files (can be opened using any text editor as well.
Code given here for reference)
1. finalmove.smil (click
to play)
Playing a short segment of a video clip using SMIL
sample screenshot:
code:
<smil>
<body>
<video src="board.rm" clip-begin="16s" clip-end="27s"/>
</body>
</smil>
2. threecams.smil (click
to play)
Playing multiple video clips simultaneously using SMIL
sample screenshot:
code:
<smil>
<head>
<layout>
<root-layout width="1080" height="240"/>
<region id="video_left" width="360" height="240" left="0" top="0"/>
<region id="video_center" width="360" height="240" left="360"
top="0"/>
<region id="video_right" width="360" height="240" left="720"
top="0"/>
</layout>
</head>
<body>
<par dur="30s">
<video src="black.rm" clip-begin="1.09s" region="video_left"/>
<video src="board.rm" clip-begin="0s" region="video_center"/>
<video src="white.rm" clip-begin="1.10s" region="video_right"/>
</par>
</body>
</smil>
3. voiceover.smil (click to
play)
Adding an audio track and delaying video playback using SMIL
code:
<smil>
<head>
<layout>
<root-layout width="1080" height="240"/>
<region id="video_left" width="360" height="240" left="0" top="0"/>
<region id="video_center" width="360" height="240" left="360" top="0"/>
<region id="video_right" width="360" height="240" left="720" top="0"/>
</layout>
</head>
<body>
<par dur="35s">
<video src="black.rm" begin="5s" clip-begin="1.09s"
region="video_left"/>
<video src="board.rm" begin="5s" clip-begin="0s" region="video_center"/>
<video src="white.rm" begin="5s" clip-begin="1.10s"
region="video_right"/>
<audio src="voicetrack.rm"/>
</par>
</body>
</smil>
4. text.rt (click to play)
Sample RealText file for Fool's Mate example
sample screenshot:
code:
<window width="560"
height="100"
bgcolor="black"/>
<font color="white" face="arial" size="+2">
<b>
<center>
<time begin="00:00:00.00"/><clear/>
The Fool's Mate is often tried on newcomers to the game of chess.
<time begin="00:00:05.00"/><clear/>
White begins, and opens up his King to a fatal attack.
<time begin="00:00:12.50"/><clear/>
Black moves a pawn to give her Queen room to move out.
<time begin="00:00:19.50"/><clear/>
White moves the other pawn forward, leaving a clear line of attack on
the King.
<time begin="00:00:31.46"/><clear/>
Black checkmates using her Queen.
<time begin="00:00:34.90"/><clear/>
It is rarely a good idea to move the pawns on f2, g2 and h2 so early in
the game as the King normally castles on this side. If the pawns have
been moved, they can no longer offer him adequate protection.
5. voiceovertxt.smil (click
to play)
Presenting text and audio commentaries using SMIL
sample screenshot:
code:
<smil>
<head>
<layout>
<root-layout width="1080" height="350"/>
<region id="video_left" width="360" height="240" left="0" top="0"/>
<region id="video_center" width="360" height="240" left="360" top="0"/>
<region id="video_right" width="360" height="240" left="720" top="0"/>
<region id="text_subtitle" width="560" height="100" left="260" top="250"/>
</layout>
</head>
<body>
<par dur="55s">
<video src="black.rm" begin="5s" clip-begin="1.09s"
region="video_left"/>
<video src="board.rm" begin="5s" clip-begin="0s" region="video_center"/>
<video src="white.rm" begin="5s" clip-begin="1.10s"
region="video_right"/>
<textstream src="text.rt" region="text_subtitle"/>
<audio src="voicetrack.rm"/>
</par>
</body>
</smil>
6. edited.smil (click to play)
Editing multiple clips into a single frame using SMIL
code:
<smil>
<head>
<layout>
<root-layout width="360" height="240"/>
<region id="video_main" width="360" height="240" left="0" top="0"/>
</layout>
</head>
<body>
<par>
<seq>
<video src="black.rm" begin="2s" clip-begin="0s" dur="2.2s"
region="video_main"/>
<video src="board.rm" clip-begin="0s" dur="4.2s"
region="video_main"/>
<video src="black.rm" clip-begin="5s" dur="3.2s"
region="video_main"/>
<video src="board.rm" clip-begin="8s" dur="4.5s"
region="video_main"/>
<video src="white.rm" clip-begin="13.5s" dur="2s"
region="video_main"/>
<video src="board.rm" clip-begin="14s" dur="3.7s"
region="video_main"/>
<video src="black.rm" clip-begin="18s" dur="6s"
region="video_main"/>
<video src="board.rm" clip-begin="23s" dur="3.5s"
region="video_main"/>
<video src="white.rm" clip-begin="27s" dur="4.5s"
region="video_main"/>
<video src="board.rm" clip-begin="29s" dur="0.5s"
region="video_main" fill="freeze"/>
</seq>
<audio src="voicetrack.rm"/>
</par>
</body>
</smil>
7. title3cams.smil (click to play)
Adding a title at the beginning of a presentation
sample screenshot:
code:
<smil>
<head>
<layout>
<root-layout width="1080" height="350"/>
<region id="video_left" width="360" height="240" left="0" top="0"/>
<region id="video_center" width="360" height="240" left="360"
top="0"/>
<region id="video_right" width="360" height="240" left="720"
top="0"/>
<region id="text_subtitle" width="560" height="100" left="260"
top="250"/>
</layout>
</head>
<body>
<par dur="55s">
<video src="black.rm" begin="5s" clip-begin="1.09s" region="video_left"/>
<seq>
<img src="title.gif" dur="5s" region="video_center"/>
<video src="board.rm" clip-begin="0s" region="video_center"/>
</seq>
<video src="white.rm" begin="5s" clip-begin="1.10s" region="video_right"/>
<textstream src="text.rt" region="text_subtitle"/>
<audio src="voicetrack.rm"/>
</par>
</body>
</smil>
8. clipBegin.smil (click
to play)
Using clipBegin and clipEnd instead of clip-begin and clip-end. clipBegin
is a SMIL 2.0 (http://www.w3.org/TR/smil20/) feature and although clip-begin
will also work in SMIL 2.0, it is supposed to be phased out over time.
In order to specify SMIL 2.0 as the version to be used in this file, we have to declare the xml namespace using the xmlns attribute within the <smil> tag.
And although the DOCTYPE statement is not essential in a SMIL file, it is generally considered good practice to include that as well. This example shows how both the DOCTYPE statement and the xmlns attribute can be specified.
code:
<!DOCTYPE smil PUBLIC "-//W3C//DTD SMIL 2.0//EN"
"http://www.w3.org/2001/SMIL20/SMIL20.dtd">
<smil xmlns="http://www.w3.org/2001/SMIL20/Language">
<body>
<video src="board.rm" clipBegin="16s" clipEnd="27s"/>
</body>
</smil>
9. qtcompatible.smil (click to play)
QuickTime Player is a popular media player that is SMIL 1.0 compatible. Most features work the same way as they do in the RealPlayer. However, one of the differences is in the way that the QT player handles the clip-begin attribute. Instead of simply specifying the time as clip-begin="3s", you have to use the clip-begin="npt=3s". npt stands for normal play time (read more about it at http://www.w3.org/TR/smil20/extended-media-object.html#media-MediaClipping).
The following code will work in both the RealMedia and the QuickTime players.
code:
<smil>
<body>
<video src="lastword_160_MPEG4IP.mp4" clip-begin="npt=09s"
dur="6s"/>
</body>
</smil>
10. gervoiceovertxt.smil (click
to play)
Adding translated subtitle text. We took the RealText file (text.rt)
that was created above (Example 4) and replaced the English lines by
their german equivalents. The smil file was then modified to refer to
this new file (germantext.rt)
instead of text.rt
code:
<smil>
<head>
<layout>
<root-layout width="1080" height="350"/>
<region id="video_left" width="360" height="240" left="0" top="0"/>
<region id="video_center" width="360" height="240" left="360"
top="0"/>
<region id="video_right" width="360" height="240" left="720"
top="0"/>
<region id="text_subtitle" width="560" height="100" left="260"
top="250"/>
</layout>
</head>
<body>
<par dur="55s">
<video src="black.rm" begin="5s" clip-begin="1.09s" region="video_left"/>
<video src="board.rm" begin="5s" clip-begin="0s" region="video_center"/>
<video src="white.rm" begin="5s" clip-begin="1.10s" region="video_right"/>
<textstream src="germantext.rt" region="text_subtitle"/>
<audio src="voicetrack.rm"/>
</par>
</body>
</smil>
ã Cognitive
Development Lab at the
University
of Illinois at Urbana-Champaign
Last revised by Sujai
Jan 3,2003
FastCounter by bCentral