|
Working with SMIL
By John Maxwell Hobbs
Go to
page: 1 2
Next
The Synchronized Multimedia Integration Language (SMIL) is a recommendation
from the World Wide Web Consortium (W3C) intended to allow the easy
implementation of sophisticated time-based multimedia content on the
Web. SMIL is an XML extension and currently in version 1.0. SMIL is currently supported for Windows, Unix and Macintosh in GRiNS from the Centrum voor Wiskunde en Informatica (CWI) and for Unix and Java in HPAS via the W3C. SMIL is also partially supported for Windows in the G2 Player beta
at Real Networks, with the promise of full implementation in the final
release. For this tutorial, I recommend using the GRiNS player.
Because of the nature of multimedia, you will need a high-speed
connection to play the demos over the network, otherwise download the
example files and media and run them locally. Five easy pieces Just how easy is easy? We'll begin with a simple slide show of my trip to the Great Wall of China. This was done in just 16 lines:
<smil>
<seq id="presentation">
<font face="Verdana, Arial, Helvetica" size="-1"><img id="fortress" region="image1" src="604851_files/fortress.jpg" dur="5s">
<img id="firstview" region="image1" src="604851_files/firstview.html" dur="5s">
<img id="tower" region="image1" src="604851_files/tower.html" dur="5s">
<img id="oldwall" region="image1" src="604851_files/oldwall.html" dur="5s">
<img id="longshot" region="image1" src="604851_files/longshot.html" dur="5s">
</font></seq>
</smil>
The first three lines inform the application that this document is an
extension to XML 1.0 and gives a URI at the W3C's server where the
application can find the Document Type Definition (DTD), if necessary.
Following that, the remainder of the document looks quite similar to
HTML. This slide show is fairly boring, so let's add some visual interest and a bit of layout. This .smil document is not much larger than the first, but it contains almost all the elements you will ever need to use.
The <head> of a .smil document contains the non-time-based
information about the document: the title, meta information for search
engines, and all the layout parameters for the presentation. SMIL
allows you to set the overall size of the display area, regions based
on position related to left and top edges, size of the regions, and
layers specified by the z-index. In the example above, the "background"
region is given an explicit z-index value of 0 -- when an image is
placed in the "image 1" region, which has a z-index value of 1, it will
appear on top of the background image.
The <body> of the document contains the instructions for the
time-based elements and linking behavior of the document. This is where
the two key elements of a SMIL document, the <seq> and
<par> tags, are found. Media enclosed in a <seq> tag are
presented in sequence. Media enclosed in a tag are played
simultaneously, or in parallel. It's as easy as that. <seq> and
<par> nodes can be nested to allow for complex, interrelated
behavior. Media types and their temporal behavior are described within the nodes. For example,
<tt>
<img id="fortress" region="image1" src="604851_files/fortress.jpg"
begin="5s" dur="5s"> </tt>
means that the image contained in the file "fortress.jpg" will be
displayed in the "image 1" region five seconds after that sequence
begins and will disappear after five seconds.
Go to
page: 1 2
Next
|
