Learning To SMILe - Playing In Sync (
Page 6 of 8 )
Of course, in the real
world, it's unlikely that you'll be using a single media clip within your SMIL
file. And as the number of elements increases, so does the need for
synchronization between them. Which is why SMIL includes three synchronization
elements, designed to address your most common needs.
The first of these
is the <seq> element, which allows you to group a bunch of elements
together and play them back sequentially. Here's an example:
<smil xmlns="http://www.w3.org/2001/SMIL20/Language">
<head>
<layout>
<root-layout width="800" height="600" backgroundColor="white" />
<region id="alpha" left="20" top="20" width="250" height="100" />
<region id="beta" left="120" top="420" width="700" height="100" />
</layout>
</head>
<body>
<seq>
<audio src="bg1.wav" region="alpha" />
<audio src="bg2.wav" region="beta" />
</seq>
</body>
</smil>
In this case, the two audio files are played sequentially,
one after the other. Obviously, you can exert further control over the manner in
which they are displayed by placing appropriate "begin", "dur" and "end"
attributes for each element.
...
<body>
<seq>
<audio src="bg1.wav" region="alpha" begin="5s" dur="2s" />
<audio src="bg2.wav" region="beta" />
</seq>
</body>
...
In this case, the first audio file would begin playing 5
seconds into the clip, die after 2 seconds, and would be immediately followed by
the second file, which would play all the way through.
SMIL also allows
you to play back media in parallel, rather than sequentially, via the
<par> grouping element. Consider the following variant of the previous
example, in which both audio files are played simultaneously in their respective
regions:
<smil xmlns="http://www.w3.org/2001/SMIL20/Language">
<head>
<layout>
<root-layout width="800" height="600" backgroundColor="white" />
<region id="alpha" left="20" top="20" width="250" height="100" />
<region id="beta" left="120" top="120" width="600" height="100" />
</layout>
</head>
<body>
<par>
<audio src="bg1.wav" region="alpha" />
<audio src="bg2.wav" region="beta" />
</par>
</body>
</smil>
Obviously, "begin" and "dur" attributes can be used here as
well – consider the following example, which plays back an audio file and an
image in parallel; the audio file repeats 5 times, with the image appearing on
the second iteration:
<smil xmlns="http://www.w3.org/2001/SMIL20/Language">
<head>
<layout>
<root-layout width="800" height="600" backgroundColor="white" />
<region id="alpha" left="20" top="20" width="250" height="100" />
<region id="beta" left="120" top="420" width="700" height="100" />
</layout>
</head>
<body>
<par>
<audio src="bg.wav" region="beta" dur="4s" repeatCount="5" />
<img src="logo.jpg" region="alpha" begin="4s"/>
</par>
</body>
</smil>
It must be noted that although there are time differences in
the playback of the two media files in the example above, they are both loaded
together.
In SMIL, it is also possible to created nested groups of
elements. Consider the following example, which demonstrates:
<smil xmlns="http://www.w3.org/2001/SMIL20/Language">
<head>
<layout>
<root-layout width="800" height="800" backgroundColor="white">
<region id="vid" left ="20" top="20" width="600" height="600" />
<region id="txt" left ="20" top="700" width="300" height="100" />
</layout>
</head>
<body>
<par>
<seq>
<video src="video1.rm" region="vid" begin="6s" end="8s"/>
<video src="video2.rm" region="vid" begin="2s" dur="10s"/>
</seq>
<text src="data.txt" region="txt" />
</par>
</body>
</smil>
Finally, SMIL also provides the <excl> synchronization
element, which allows you to create a group of media clips and play them, one at
a time, in a pre-defined order. Only one media clip within an <excl> group
can be played at any time; parallel play is not permitted within such a
block.
Here's an example:
<smil xmlns="http://www.w3.org/2001/SMIL20/Language">
<head>
<layout>
<root-layout width="800" height="800" backgroundColor="white">
<region id="vid1" left="20" top="20" width="600" height="600" />
<region id="vid2" left="50" top="70" width="100" height="100" />
<region id="img" left="20" top="700" width="300" height="100" />
</layout>
</head>
<body>
<excl>
<video src="video1.rm" region="vid1" begin="15s" end="10s"/>
<video src="video2.rm" region="vid2" begin="10s" end="8s"/>
<img src="image.jpg" region="img" begin="20s" dur="6s"/>
</excl>
</body>
</smil>
In the above exclusive group, the media files are run one
after the other, in the order specified in the timing, and not in order of
hierarchy.
/ 8 
