Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

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.


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

<smil> <body> <seq repeatCount="indefinite"> <img src="flower1.jpg" begin="2s" dur="5s"/> </seq> </body> </smil>

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



Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

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