n this article you will see how to use the Synchronized Multimedia Integration language (SMIL) and PHP to add great slideshow presentations to your web sites. If you’re not already familiar with SMIL, you’ll discover that it’s extremely agile and simple to use. PHP is compatible with SMIL, makes it dynamic, and provides server-side support. Together, they can do a great job.
A Brief Introduction to SMIL
SMIL is a W3C standard. You write SMIL in XML, using a vocabulary similar to HTML to create slideshow-like presentations, displaying and controlling multiple multimedia files. SMIL has methods for defining element sequences, duration, position, and visibility, etc.
How to Play a SMIL File
To play a SMIL presentation, you need a SMIL player. Here are some SMIL players on the web:
- RealPlayer by RealNetworks has full support for SMIL 2.0 (it also supports for Flash and MP3 formats).
- Apple’s QuickTime http://www.apple.com/quicktime/win.htmlplayer supports SMIL 1.0.
- GRiNS Player for SMIL 2.0 by Oratrix provides complete SMIL 2.0 compatibility.
- Ambulant Open SMIL Player is an open source project that supports SMIL 2.1.
- SMIL Player for InterObject Streaming Server supports the SMIL 2.0 Basic Profile on PocketPC and provides live streaming capabilities.
In addition, Internet Explorer 5.5 (or later) can play SMIL presentations natively. For a more complete list of player options, see the SMIL player page.
Editing SMIL Presentations
While you can write SMIL presentations manually, it’s much easier to use a SMIL editor. Some of the most popular are:
Again, you can find a more complete list of editing and authoring tools on the main SMIL site.
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
- 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:
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.
Running SMIL Presentations in IE 5.5 or Later
To use SMIL elements in HTML you must define a “time” namespace so Internet Explorer will recognize the elements. You do this by:
- Adding a namespace definition to the tag (xmlns:time=”urn:schemas-microsoft-com:time”)
- Adding an element for importing a new namespace—time2 ()
To add SMIL attributes to standard HTML elements you must define a “time” class that Internet Explorer uses to recognize the attributes. You do this by adding a
The complete structure should look like this:
To insert SMIL elements in HTML documents, add a prefix and a class attribute to the SMIL elements:
|Figure 2. HTML and SMIL in IE 7: When you run the HTML example (image.html), the image appears two seconds after the page loads, remains visible for five seconds, and then repeats.|
The preceding example adds the "time" prefix to the SMIL seq element and the "time" attribute to the elements.
Here's the corresponding HTML document for the show_image.smil example shown in the previous section. You need Internet Explorer 5.5 or later to run this example (see Figure 2):
|Figure 3. The Text.html Presentation: The three sentences display in sequence over a six-second duration.|
While the preceding examples showed images, the next example creates a slideshow presentation that displays only text, in varying colors, sizes, fonts, and durations. Because the example runs on a timeline, for the complete results you should run the example in Internet Explorer; however, Figure 3 shows an amalgamated snapshot of what happens:
This text will be displayed for one second! This text will be displayed for two seconds! This text will be displayed for three seconds!
Generating SMIL Documents with PHP
Now that you've seen some static SMIL documents, you can easily see how you might generate SMIL using PHP. First, you need to output the set of headers below:
header("Content-type: application/smil"); header ("Cache-Control: no-cache, must-revalidate"); header("Expires: Mon, 29 Jul 2000 07:00:00 GMT"); header('Content-Disposition: attachment; filename="test.smil"');
- The first header tells the browser that the document contains SMIL code. The MIME type corresponding for SMIL documents is application/smil.
- The second header tells the browser to ignore any cached content and download the most recent version. You need this because you might want to generate different documents dynamically at different times from the same URL.
- The third header expires the current document using a date earlier than the current date. This prevents the browser from caching the current document.
- The Content-Disposition: attachment; filename="test.smil" header tells the browser to download the dynamically generated SMIL document just like any other file.
With the headers in place, you can generate the dynamic SMIL document itself. The example writes the same using_images.smil document shown earlier:
|Figure 4. Download the SMIL Document: Internet Explorer recognizes the using_images.php script as an application; click Open to see the results.|
Save the code in a folder named smil, under your web server root. Also copy three .jpg files (see the downloadable code) named flower1.jpg, flower2.jpg, and flower3.jpg to the smil folder. After doing that, you can run the example by browsing to http://localhost/http://localhost/smil/using_images.phpsmil/using_images.php (see Figure 4).
SMIL Layouts and Regions
Based on the same three .jpg files, the next example generates a SMIL document that focuses more on presentation design details. The design elements that control a SMIL presentation are:
- The layout element, which determines how to position elements in the document's body on an abstract rendering surface
- The root-layout element determines the window properties, such as size and background color. A SMIL document must contain one and only one root-layout element; otherwise the document will cause an error, and will not display.
|Figure 5. Slideshow Presentation: The figure shows the last screen of the slideshow presentation, opened using the AmbulantPlayer SMIL player.|
The region element controls the position (left, top), the background color and size (width, height) and the z-index of media object elements. Figure 5 shows the results of the following code running in a browser:
Customizing Dynamic SMIL Documents
|Figure 6. HTML Form: Here's how the flower-slide_show_form.html form looks.|
To put everything together, this section shows how to write an HTML/PHP application that generates a custom SMIL presentation. The basic idea is to let users select some of the SMIL customizable aspects (images or audio files, transition times, and durations) from an HTML form, and then use PHP to capture the user input and generate the corresponding SMIL document. Listing 1 shows the HTML form (see Figure 6).
When the user submits the form, this PHP script uses the values users enter or select in the HTML form to dynamically generate a SMIL document:
Here's a sample SMIL document generated by the preceding script:
When you run the flower_slide_show.smil presentation using a SMIL player such as AmbulantPlayer, you should see a presentation with content similar to Figure 7.
|Figure 7. Sample Generated Slideshow: Here's the generated flower_slide_show.smil document captured during a transition.|
As this article shows, PHP can generate fully-functioning timed SMIL presentations in which you programmatically control element positioning, appearance, and duration. Together, PHP and SMIL form a symbiosis that's simple, amazingly productive, and very lightweight compared to many alternatives.