Basic Structure of SMIL Files
A SMIL file may contain the following objects:
- The layout of the presentation: This determines how to position the elements in the document's body on an abstract rendering surface.
- The timeline of the presentation: This controls when elements appear, disappear, and how long they are active.
- The source of the multimedia elements: This controls where the program should look for the various elements in the presentation.
The root element of a SMIL document is a <smil>
tag, which has two subordinate elements: <head>
. Typically, you name SMIL documents with a .smil
extension. The <head>
element holds information about the presentation layout and other meta-information. The <body>
element holds the media elements, the hyperlinks, references to the other multimedia objects, etc.
elements can have these attributes:
- id: the unique identifier of the element
- class: CSS style class used by the element
- xml:lang: represents the language used for the element content.
An in-depth discussion of each SMIL element and attribute is beyond the scope of this article, but you can learn more about SMIL elements and properties from this tutorial
Here's a simple SMIL document that displays the image flower1.jpg
for five seconds:
<img src="flower1.jpg" begin="2s" dur="5s"/>
As you can see, the image begins to display after two seconds, and persists for five more seconds.
|Figure 1. SMIL Presentation: Here's one image from the using_images.smil presentation viewed with AmbulantPlayer.|
Here's another simple SMIL document example that creates a slideshow presentation (see Figure 1
) using three images, positioned into a layout of 250 x 250 pixels. Each image lasts one second longer than the previous image.
<!DOCTYPE smil PUBLIC "-//W3C//DTD SMIL 2.l//EN"
<root-layout width="250" height="250"
<img src="flower1.jpg" dur="1s" />
<img src="flower2.jpg" dur="2s" />
<img src="flower3.jpg" dur="3s" />