Home arrow Multimedia arrow Page 6 - Learning To SMILe

Playing In Sync - Multimedia

Take a tour of SMIL, the Synchronized Multimedia Integration Language, and find out how you can use it to quickly and rapidly build Web-based multimedia offerings incorporating multiple media types.

TABLE OF CONTENTS:
  1. Learning To SMILe
  2. Getting The Tools
  3. Anatomy 101
  4. Laying It Out
  5. Spending Time
  6. Playing In Sync
  7. A Click In Time...
  8. Bedtime Reading
By: icarus, (c) Melonfire
Rating: starstarstarstarstar / 8
November 21, 2002

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement
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. 

 
 
>>> More Multimedia Articles          >>> More By icarus, (c) Melonfire
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

MULTIMEDIA ARTICLES

- Basic Lighting in OpenGL and SDL Game Progra...
- Working with Colors in OpenGL for Game Progr...
- Animation in OpenGL for Game Programming usi...
- Game Programming with SDL: Getting Started w...
- Using OpenGL with SDL for Game Programming
- Learning Sound for Game Programming using SDL
- Game Programming using SDL: Raw Graphics and...
- Game Programming using SDL: Getting Started
- Network Radio With Icecast
- Learning To SMILe

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: