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 4

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

<?php header ("Cache-Control: no-cache, must-revalidate"); header("Expires: Mon, 29 Jul 2000 07:00:00 GMT"); header ("Content-Type: application/smil"); header('Content-Disposition: attachment; filename="using_images.smil"'); ?> <!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>

 
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:

<?php header ("Cache-Control: no-cache, must-revalidate"); header("Expires: Mon, 29 Jul 2000 07:00:00 GMT"); header ("Content-Type: application/smil"); header('Content-Disposition: attachment; filename="flower_slide_show.smil"'); ?> <!DOCTYPE smil PUBLIC "-//W3C//DTD SMIL 2.l//EN" "http://www.w3.org/2005/SMIL2l/SMIL2l.dtd"> <smil xmlns="http://www.w3.org/2005/SMIL21/Language"> <head> <layout> <root-layout width="480" height="510" backgroundColor="white" /> <region id="regl" left="30" top="10" width="250" height="167" z-index="2" backgroundColor="white" /> <region id="reg2" left="200" top="40" width="250" height="266" z-index="1" backgroundColor="white" /> <region id="reg3" left="85" top="150" width="250" height="325" z-index="3" backgroundColor="white" /> </layout> </head> <body> <par> <img src="flower1.jpg" region="regl" begin="1s" fit="meet" dur="indefinite" /> <img src="flower2.jpg" region="reg2" begin="2s" fit="meet" dur="indefinite" /> <img src="flower3.jpg" region="reg3" begin="3s" fit="meet" dur="indefinite" /> </par> </body> </smil>

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:

<?php header ("Cache-Control: no-cache, must-revalidate"); header("Expires: Mon, 29 Jul 2000 07:00:00 GMT"); header ("Content-Type: application/smil"); header('Content-Disposition: attachment; filename="flower_slide_show.smil"'); ?> <smil xmlns="http://www.w3.org/2005/SMIL2l/Language"> <head> <meta name="title" content="Flowers Slideshow" /> <meta name="author" content="Octavia-Andreea Anghel" /> <layout> <root-layout width="250" height="250" backgroundColor="black" /> </layout> <transition id="star5" type="starWipe" subtype="fivePoint" dur="4s" /> </head> <body> <par> <audio src="<?php echo $_GET['audio'].'.mp3'; ?>" begin="<?php echo $_GET['audio_begin']; ?>" dur="<?php echo $_GET['audio_dur'];?>" /> <seq> <img src="<?php echo $_GET['image']; ?>" begin="<?php echo $_GET['img_begin']; ?>" dur="<?php echo $_GET['img_dur']; ?>" transIn="star5"/> </seq> </par> </body> </smil>

Here's a sample SMIL document generated by the preceding script:

<smil xmlns="http://www.w3.org/2005/SMIL2l/Language"> <head> <meta name="title" content="Flowers Slideshow" /> <meta name="author" content="Octavia-Andreea Anghel" /> <layout> <root-layout width="250" height="250" backgroundColor="black" /> </layout> <transition id="star5" type="starWipe" subtype="fivePoint" dur="4s" /> </head> <body> <par> <audio src="ocean.mp3" begin="1s" dur="10s" /> <seq> <img src="flower1.jpg" begin="2s" dur="10s" transIn="star5"/> </seq> </par> </body> </smil>

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.



Octavia Andreea Anghel is a senior PHP developer currently working as a primary trainer for programming teams that participate at national and international software-development contests. She consults on developing educational projects at a national level. She is a coauthor of the book "XML Technologies—XML in Java" (Albastra, ISBN 978-973-650-210-1), for which she wrote the XML portions. In addition to PHP and XML, she's interested in software architecture, web services, UML, and high-performance unit tests.
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