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.
Next: A Click In Time... >>
More Multimedia Articles
More By icarus, (c) Melonfire
