RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


PHP and SMIL: A Happy Combination  : Page 2

SMIL gives you control of multimedia and text elements in a browser over a timeline, while PHP lets you write dynamic SMIL code. The combination produces nicely-timed presentations.

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> and <body>. 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.

The <smil>, <head> and <body> 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:

     <seq repeatCount="indefinite">
       <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" 
   <smil xmlns="http://www.w3.org/2005/SMIL2l/Language"> 
             <root-layout width="250" height="250" 
                backgroundColor="black" /> 
       <img src="flower1.jpg" dur="1s" />
       <img src="flower2.jpg" dur="2s" />
       <img src="flower3.jpg" dur="3s" />

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date