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


PHP and SMIL: A Happy Combination  : Page 3

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.

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 <html> tag (xmlns:time="urn:schemas-microsoft-com:time")
  • Adding an <?import> element for importing a new namespace—time2 (<?import namespace="time" implementation="#default#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 <style> element to define the "time" class:

<style> .time {behavior: url(#default#time2)} </style>

The complete structure should look like this:

<html xmlns:time= "urn:schemas-microsoft-com:time"> <head> <?import namespace="time" implementation="#default#time2"> <style>.time {behavior: url(#default#time2)}</style> </head>

To insert SMIL elements in HTML documents, add a prefix and a class attribute to the SMIL elements:

<time:seq repeatCount="indefinite"> <img class="time" src="flower1.jpg" dur="3s" /> <img class="time" src="flower2.jpg" begin="4s" dur="2s" /> </time:seq>

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

<html xmlns:time="urn:schemas-microsoft-com:time"> <head> <?import namespace="t" implementation="#default#time2"> <style>.time {behavior: url(#default#time2)}</style> </head> <body> <t:seq repeatCount="indefinite"> <img class="time" src="flower1.jpg" begin="2s" dur="5s"> </t:seq> </body> </html>

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:

Listing text.html <html xmlns:t="urn:schemas-microsoft-com:time"> <head> <?import namespace="t" implementation="#default#time2"> <style>.t {behavior: url(#default#time2)}</style> </head> <body> <t:seq repeatCount="indefinite"> <font face="cursive" color="red" size="4" class="t" dur="1s" >This text will be displayed for one second!</font> <font face="Times New Roman" color="#00FF00" size="+1" class="t" dur="2s" >This text will be displayed for two seconds!</font> <font face="fantasy" color="#FF00FF" size="+2" class="t" dur="3s" >This text will be displayed for three seconds!</font> </t:seq> </body> </html>

Comment and Contribute






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



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