smilguide.com

True to its name, SMIL integrates and synchronizes multimedia. In order to do this, it uses the concept of a media object. You're probably already familiar with most of the media object types handled by SMIL, and in fact one of them is taken directly from HTML.

Here are the types supported by SMIL 2.0:

img

A still image, just like one you would use in an HTML page (JPEG, GIF, PNG, etc).

video

A video, possibly also containing audio (MPEG, AVI, MOV, etc).

audio

Stand-alone audio, either compressed or raw (MP3, WAV, AU, etc).

animation

An animation, usually using vector graphics (SVG, SWF, VML, etc).

text

Plain old text, promoted to the level of media object (TXT, ASCII, etc).

textstream

A stream of plain old text along with timing (and possibly other) information (SUB, RT, SAMI, etc). (Think of a news ticker or subtitles.)

There is also a ref object for making a reference to all other (unknown by SMIL) media objects and a brush object for creating real-time painting effects. Both of these types will require a little bit more explanation.

SMIL distinguishes between discrete (images, text) and continuous (video, audio, animation, textstream) media. These are some more terms which you math fans should love. Also, remember that some graphic files are animated, and although they are included using the <img> element, they can be considered continuous.

Including Media Files (BasicMedia)

So how does one go about adding all of this media to a presentation? You do so through the use of elements, very similar to what you would do in HTML. Each media object has a distinct element name and uses the src attribute to specify the name of the file where the media is located. Here's a couple simple examples of including a JPEG image and an MPEG video, respectively:

<img src="picture.jpg"/>

<video src="movie.mpg"/>

Unlike with HTML, you must always include a forward-slash (/) at the end of empty-element tags.

It's as simple as that. All media objects are declared in the same way, and they all have only the src and type attributes (the type attribute will not be covered in this tutorial). Pretty simple, right?

Ok, I lied, or at least I didn't tell you the whole truth. So far I've only been speaking about the BasicMedia module (remember, SMIL is composed of a number of XML modules). However, when you add the MediaParam, MediaClipping, MediaClipMarkers, BrushMedia, MediaAccessibility, and MediaDescription modules, things get a little bit more interesting. Unfortunately, we'll only be able to cover some of those here briefly.

Making Media Accessible (MediaAccessibility)

As good web designers will tell you, making content accessible is one of the hardest parts of their jobs. However, there are a number of simple steps that you, as a creator of SMIL presentations, can take to help.

SMIL provides the ubiquitous alt attribute from HTML. It also provides longdesc and readIndex attributes which enable you describe media even further:

alt

This is a brief textual description of the file, usually not even a complete sentence.

longdesc

With longdesc you can provide a link (URI) to a more detailed description, from a simple sentence to a book-length document. There is no set category for the type of description.

readIndex

Specifying a readIndex allows you to sequence the presentation of alternate text within a par, seq, or excl element (all three of which will be covered next in lesson3).

Lets go ahead and include the two media files from earlier, this time providing some helpful information about the contents:

<img src="party.jpg" alt="a picture of me from my wild bachelor party" longdesc="party.txt"/>
<video src="game.mpg" alt="a movie of one of the games from my wild bachelor party" longdesc="game.txt"/>

Now, if someone is unable to view the picture or movie they'll still be able to have some idea about the content of the files. The file specified by the URI in longdesc is not required to be in any particular format, although in this example it's assumed that it would be a plain text file (perhaps describing the picture or game along with disclaimers and apologies to the creator's wife).

Remember that accessibility information is not only provided for the visually impaired user. An alt attribute can also be used to describe an audio file. In fact, accessibility information is useful even to someone without a physical disability: they may not have the necessary software (i.e. to play Windows Media Video files on a Macintosh) or hardware (i.e. to listen to an mp3 on a cell phone).

Controlling Playback (MediaClipping)

Traditionally, when you wanted to present a clip from a media file you would edit the clip (using appropriate software) and then present the clip as a separate file. This works fine if you don't mind spending a little time and you have write access to the file. But what about when you'd like to provide a number of different clips from the same file or a clip from a file you can't edit (such as one on someone else's server)? That's where the clipping capabilities of SMIL come into play.

Obviously, clipping can only be applied to continuous media such as audio, video, and text streams.

Clipping a file is very simple. You only need to specify when the clip should begin and end using the clipBegin and/or clipEnd attributes. Both attributes take time values in the SMPTE or NPT formats. I won't cover SMPTE here, but NPT (Normal Play Time) is a format you're probably already familiar with, and the default for MediaClipping.

Here is an example of clipping the hypothetical movie.mpg file. We'll assume that the file is 30 minutes in length. Also, the accessibility attributes have been removed here for clarity, but you should always try to include them.

• Starting 20 seconds into the video: <video src="movie.mpg" clipBegin="20s"/>
• Cutting out the last 3-minute, 30-second scene: <video src="movie.mpg" clipEnd="26:30"/>
• Showing an interesting frame from the middle: <video src="movie.mpg" clipBegin="14:55.7" clipEnd="14:55.7"/>

In NPT time, a number after a decimal is a frame index.

You can also clip media by using markers, a technique which will not be covered in this tutorial.

Painting with a SMIL (BrushMedia)

Another interesting SMIL media object is the <brush>. Instead of a src attribute you specify a color. Any color format from CSS2 is valid, although the hex format from HTML is the most common, such as in the following:

<brush color="#FF0A37"/>

Brushes on their own don't do anything interesting, but they can be put into motion with the help of the other SMIL elements which we'll be looking at later.

So What's the Point?

So far, aside from clipping, we haven't done anything that really couldn't be handled by HTML. What about all this timing and synchronizing you were promised? Just hang in there, we'll get to that in the next lesson.

Test Your Understanding

1. True or false: Whenever you provide an alt attribute for a media object you must also specify a longdesc.
2. Which of the following is not continuous media?
   1. <audio>
   2. <video>
   3. <text>
   4. <img>
3. Change the following audio object so that it will begin playback 30 seconds into the file: <audio src="song.mp3" alt="my favorite song"/>
4. Extra credit: List some media file types which don't fit into one of the six media categories listed in the lesson (and would thus need to be included using <ref>).