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