Introduction to Synchronized Multimedia Integration Language (SMIL)?

SMIL known as Synchronized Multimedia Integration Language is used for time based delivery of multimedia content over web. It is possible to mix different multimedia elements such as text, video, graphics, audio, and vector based animation and synchronizes them to a timeline for delivery. SMIL is a World Wide Web Consortium recommendation. You can find necessary content at and copy it in a text form or, perhaps, create a video/audio project.

Using SMIL a user can describe the behavior of the presentation, describe the layout of the presentation and associate the media objects in the presentation with hyperlinks. Basically SMIL is a XML document with the root element being the <smil> element. The <smil> element can have child elements like <head> and <body>. The code given below is a sample SMIL document which is used to display an image in a layout specified.

<region id="a" left="50" top="50" />
<layout type="text/css">
[region="a"] {top: 50px; left: 50px }
<img region="a" src="--give image url here--" dur="10s" />

The above code gives you an idea of the structure of the SMIL document. You can use the <switch> element within the <head> element to specify a layout for the presentation. The switch element is used to select one of the alternative layouts given. In the above code both the alternative point to the same region. The purpose of the switch element is to select an alternative child element. The start point of the region where the image is to be displayed is given in the <region> tag with the help of the attributes like ‘top’ and ‘left’. These attributes give the ‘x’ and the ‘y’ coordinates in pixels. The region in which the image is displayed is identified by and ‘id’ attribute. The <body> tag encloses the actual media content that is to be displayed. The <body> can have child elements like <a>, <animation>, <audio>, <img>, <par>, <ref>, <seq>, <switch>, <text>, <textstream>, and <video>.

The <par> element is one of the synchronization elements that can synchronize different media content over a timeline. The children of the par element can overlap in the timeline. Consider the code snippet given below for the par element.

<audio id="a" begin="6s" src=”audio url here” .../>
<img begin="id(a)(4s)" src=”image url here” .../>

The above code of the par element synchronizes an audio and image together. If you look at the audio tag you see that the begin attribute has a value of ‘6s’, which means that the audio will start after a delay of 6 seconds. The img tag has a delay of “id(a)(4s)”, which clearly indicates that the image has to be displayed after 4 seconds from the start of the audio. This attribute clearly indicates a cumulative delay of 10 seconds altogether. The elements of the <par> tag can be in any order and the order of the elements will not affect the timeline and the way the media content are displayed. Suppose instead of a <par> element you have a <seq> element as given below:

<audio src=”audio url here” .../>
<img begin="4s" src=”image url here” .../>

In the above code you can see that the media content are enclosed in a <seq> element which clearly states that the audio will be first played and then the image will be displayed after a delay of 4 seconds, in that order.

Synchronization of the continuous media elements within the <par> element is implementation independent. The different media of the par element can be either synchronized to a common clock or the individual child element may have its own clock. It is implementation independent. If the elements are bound to a common clock then it is called Hard Synchronization and if the elements have their own clocks then it is called Soft Synchronization. The par element can have child elements like <a>, <animation>, <audio>, <img>, <par>, <ref>, <seq>, <switch>, <text>, <textstream>, and <video>. These child elements can appear multiple times within the par element.

Thus with the help of SMIL you can integrate different media contents in a presentation and control the appearance of each of the media content in a timeline. For more details on the specification recommended by the W3C you can visit the link

SetApp - 100 Apps for everything you ever wanted to do on Mac

FREE Subscription

Subscribe to our mailing list and receive new articles
through email. Keep yourself updated with latest
developments in the industry.


Note : We never rent, trade, or sell my email lists to
anyone. We assure that your privacy is respected
and protected.


FREE Subscription

Stay Current With the Latest Technology Developments Realted to XML. Signup for Our Newsletter and Receive New Articles Through Email.



Note : We never rent, trade, or sell our email lists to anyone. We assure that your privacy is respected and protected.



Add to My Yahoo!

Visit XML Training Material Guide Homepage



“Amazon and the Amazon logo are trademarks of, Inc. or its affiliates.”

Copyright - © 2004 - 2019 - All Rights Reserved.