SMIL Tutorial

[welcomewiki]

SMIL is a language for describing audiovisual presentations.

This tutorial shows you how to create web-based multimedia presentations which integrate audio, video, images, text or any other media type.


SMIL Example

Similar Threads:

• Sap software + installation tutorial
• Multimedia Tutorial
• Web Hosting Tutorial
• HTML Tutorial

[welcomewiki]

SMIL is an HTML-like language for describing audiovisual presentations.
What You Should Already Know

Before you continue you should have a basic understanding of the following:

• HTML
• XHTML
• XML
• XML namespaces

What Is SMIL?

• SMIL stands for Synchronized Multimedia Integration Language
• SMIL is pronounced "smile"
• SMIL is a language for describing audiovisual presentations
• SMIL is easy to learn and understand
• SMIL is an HTML-like language
• SMIL is written in XML
• SMIL presentations can be written using a text-editor
• SMIL is a W3C recommendation

A Simplified SMIL Example










From the example above you can see that SMIL is an HTML-like language that can be written using a simple text-editor.
The tags defines the SMIL document. A element defines the body of the presentation. A element defines a sequence to display. The repeatCount attribute defines an indefinite loop. Each element has a src attribute to define the image source and a dur attribute to define the duration of the display.



What Can SMIL Do?

• SMIL can be used to create Internet or Intranet presentations
• SMIL can be used to create slide-show presentations
• SMIL has been described as the Internet answer to PowerPoint
• SMIL presentations can display multiple file types (text, video, audio...)
• SMIL presentations can display multiple files at the same time
• SMIL presentations can display files from multiple web servers
• SMIL presentations can contain links to other SMIL presentations
• SMIL presentations can contain control ****ons (stop, start, next, ...)
• SMIL has functions for defining sequences and duration of elements
• SMIL has functions for defining position and visibility of elements

[welcomewiki]

A SMIL file describes a multimedia presentation.
SMIL Files

A SMIL file contains all the information necessary to describe a multimedia presentation.


SMIL files are stored with the file extension .smil
A SMIL file contains the following:

• The layout of the presentation
• The timeline of the presentation
• The source of the multimedia elements

SMIL Markup

Since SMIL is based on XML, the tags are case sensitive. All SMIL tags requires lowercase letters.



A SMIL document must start with a tag and end with a closing tag. It may contain a element and must contain a element.


The element is used to store information about the presentation layout and other meta information.


The element contains the media elements.










How to Play a SMIL File?

To view a SMIL presentation, you will need a SMIL player installed on your computer.


Apple's Quicktime player, Windows Media Player, and RealNetworks RealPlayer support SMIL.


It would be convenient to show SMIL files natively in web browser, eliminating the requirement of a separate SMIL player or plug-in.


Microsoft's Internet Explorer has limited support for SMIL. The open-source Mozilla project is incorporating SMIL, but the progress is slow.


Note: The rest of this tutorial uses IE 5.5 or later, to demonstrate SMIL.

[welcomewiki]

Internet Explorer can run SMIL presentations inside HTML files.
Running SMIL in IE

SMIL elements can be inserted into HTML files in Internet Explorer 5.5 or later.


To use SMIL elements in your HTML pages, you must add a "time" namespace to recognize the elements. To use SMIL attributes, you must define a "time" class. Here is how to do it:

• Add a time namespace to the tag
• Add an element to import the "time" namespace
• Add a
  
  
  You will see the full example in the next paragraph.
  SMIL Example
  
  To run a SMIL presentation in an HTML page, just add a prefix and a class attribute to the SMIL elements:
  
  
  Example
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  In the example above we have added class="time" to the elements, and a "time" prefix to the SMIL elements
  
  
  The class and namespace do not have to be called "time". Any name will do.

[welcomewiki]

Browsers will treat audio and video as easy as old browsers treat text and images.
HTML+TIME

In the previous chapter you saw Internet Explorer could display SMIL elements in HTML.


The history behind this is shortly as follows:


June 1998: SMIL 1.0 became a W3C Recommendation.


September 1998: Microsoft, Macromedia, Compaq/Digital and Digital Renaissance submitted HTML+TIME to W3C as a proposal for adding SMIL 1.0 timing and synchronization support to HTML.


The HTML+TIME proposal describes very much the support for SMIL that can be found in IE 5.5.
XHTML+SMIL

August 2001: SMIL 2.0 became a W3C Recommendation. XHTML+SMIL became a separate Working Draft, based on the ideas of HTML+TIME.
The XHTML+SMIL Working Draft describes very much the support for SMIL that can be found in IE 6.0.

What is Happening Here?

SMIL is currently in a very interesting development process.
SMIL 1.0 defined a simple way to create visual media presentations and how to play them.


HTML+TIME added SMIL 1.0 abilities to nearly all HTML elements.
SMIL 2.0 added interactivity and transitions to SMIL 1.0.


XHTML+SMIL adds SMIL 2.0 abilities to nearly all XHTML elements.
XHTML+SMIL has a great potential for taking the web to the next level, and let browsers treat audio and video like "old" browsers treated text and images.
Why XHTML+SMIL?

Is it not obvious?


To run a SMIL presentation today, you'll need a SMIL player. Would it not be nicer if you could run SMIL directly in your browser?
SMIL defines a set of multimedia elements. Each of these elements can be given layout, timing, and transition attributes and rules. Would it not be nicer if you could add these attributes and rules to all your HTML elements?