SMIL

1
SMIL Synchronized Multimedia Integration
Language
2
SMIL stands for Synchronized Multimedia Integratio
n Language SMIL is a language for describing
audiovisual Presentations Enables us to write
interactive MM presentation SMIL is an XML
tagging language- similar to HTML. SMIL
presentations can be written using a text- editor
3
SMIL offers accessibility options and powerful
features not present in other media players.
Macro products like Flash Real audio's Real
player Microsoft's powerpoint Apple's
quicktime Limitations They rely on
plugins Doesn't benefit from modern
browser Unsupported by most of mobile devices.
4
Multimedia track synchronized with HTML content
Content based Navigation User Interactions Custom
extensions
5
Web Radio
Web Radio
Web Radio
We have media player, HTML content that is
synchronized with media
6
Content based navigation
Can jump from one section to another sequentially
or from table of contents
7
Common implementation of SMIL

• Internet or Intranet presentations.
• Slide show presentations.
• Presentations which link to other SMIL files.
• Presentations which have Control buttons (stop,
  start, next, ...)
• Defining sequences and duration of multimedia
  elements
• Defining position and visibility of multimedia
  elements
• Displaying multiple media types such as audio,
  video, text
• Displaying multiple files at the same time.
• Displaying files from multiple web servers.
• Currently, SMIL's most widespread usage is with
  MMS. MMS (Multimedia Messaging System) is a
  mobile device technology

8
Multimedia Slideshow
Flash and Real player depend on plugins
Unsupported by most of the mobile
devices Animations work when SVG(Scalable Vector
Graphics (SVG) ) is an XML markup language for
describing two-dimensional vector graphics is
embedded as ltimggt
9
SMIL HTML
Content structure and Multimedia audio video is
handled by HTML 5 Transitions and animations are
handled by CSS 3 Time structure synchronization
and user interactions are handled by SMIL
Timings And Timesheets.
10
Guidelines and Rules
SMIL files need to be written according to the
following rules SMIL documents must follow
the XML rules of well-formedness. SMIL tags
are case sensitive. All SMIL tags are written
with lowercase letters. SMIL documents must
start with a ltsmilgt tag and end with a lt/smilgt
closing tag. SMIL documents must contain a
ltbodygt tag for storing the contents of the
presentation. SMIL documents can have a
ltheadgt element (like HTML) for storing metadata
information about the document itself, as well as
presentation layout information.
11
Simple SMIL file
ltsmilgt
ltheadgt ltlayoutgt
... lt/layoutgt
lt/headgt ltbodygt
... lt/bodygt
lt/smilgt
12
Layout Within the head tags you must define
layout tags ltlayoutgt lt/layoutgt Within these
layout tags you must define a root a root layout,
this is where you define the size of the
presentation and other attributes (such as the
background colour). ltroot-layout height"500"
width"500" background- color"black" id"main"
/gt Parallel and Sequence There are two main tags
used when defining the order of the displaying
media ltseqgt
13
Sequence ltsmilgt
ltbodygt ltseq repeatCount"indefinite"gt
ltimg src"image1.jpg" dur"3s" /gt ltimg
src"image2.jpg" dur"3s" /gt lt/seqgt
lt/bodygt lt/smilgt A ltseqgt element defines a
sequence to display. The repeatCount attribute
defines an indefinite loop. Each ltimggt element
has a src attribute to define the image
source and a dur attribute to define the
duration of the display.
14
Media driven Timings
15
Event Driven Timing
16
(No Transcript)
17
Regions Still within the layout tags you need to
define regions within your presentation. A region
is a rectangular/square shaped object which
media appears in. To define a region with the
layout use the following. ltregion id"someID"
width"200" height"200" top"10" left"10"
background- color"white" z-index"1" /gt The id
is the unique identifier you give this region,
the height and width define the size of the
region, the top and left attributes define how
far off the top and left margins of the
presentation area the region lies, the
background-color defines the background
colour and the z-index attribute defines the
order of the stacking of the regions.
18
Layout We will make the difference
between Absolute Positioning, Relative
Positioning
19
Image to our presentation ltsmilgt
ltheadgt ltlayoutgt ltroot-layout
width"300" height"300"
background-color"white"/gt ltregion id"cows"
top"0" left"0" width"300"
height"197"/gt lt/layoutgt lt/headgt
ltbodygt ltimg src"cows.jpg"
region"cows"/gt lt/bodygt lt/smilgt
20
(No Transcript)
21
(No Transcript)
22
Relative Positioning You can also
specify media positions relatively to the
window's dimensions. For example, if
you wish to display the vim icon at 50 from the
left border and at 40 from the top border,
modify the previous source and replace the left
and top attributes.
23
ltsmilgt ltheadgt ltlayoutgt ltrootlayout width"300"
height"200" backgroundcolor"white" /gt ltregion
id"vim_icon" left"50" top"40" width"32"
height"32" /gt lt/layoutgt lt/headgt ltbodygt ltimg
src"vim32x32.gif" alt"The vim icon"
region"vim_icon" /gt lt/bodygt lt/smilgt
24
(No Transcript)
25
When two regions overlay To be sure that one
region is over the other, add zindex attribute
to ltregiongt. When two region overlay, the one
with the greater zindex is on top. If both
regions have the same zindex, the first
rendered one is below the other. In the
following code, we add zindex to region_1 and
region_2.
26
ltsmilgt ltheadgt ltlayoutgt ltrootlayout width"300"
height"200" backgroundcolor"white" /gt ltregion
id"region_1" left"50" top"50" width"150"
height"125" zindex"2"/gt ltregion id"region_2"
left"25" top"25" width"100" height"100"
zindex"1"/gt lt/layoutgt lt/headgt ltbodygt ltpargt
lttext src"text1.txt" region"region_1" /gt
lttext src"text2.txt" region"region_2" /gt
lt/pargt lt/bodygt lt/smilgt
27
(No Transcript)
28
Media types SMIL can integrate many types of
media (though this is sometimes limited by the
application). Like HTML you need to define a
source for your media. You also need to define a
region of the presentation in which the play the
media. lttext src"someText.txt"
region"someRegion" /gt We can also define the
amount of time that the media plays for by using
the dur' attribute, we can set how far into the
media we want it to start playing (only useful
with sound and video), how much of the region we
want the media to fill and give the media an
id. ltvideo src"someVid.mpg" region"someRegion" b
egin"10s" dur"50s" repeat"2" fill"fit"
id"someVid" /gt
29
(No Transcript)
30
(No Transcript)
31
(No Transcript)
32
(No Transcript)
33
The ltaudiogt element defines a reference to
an audio object stored as recorded audio.
lthtml xmlnst"urnschemas-microsoft-
comtime"gt
ltheadgt lt?import
namespace"t"
implementation"defaulttime2"gt
lt/headgt ltbodygt
lttaudio src"liar.wav"
repeatCount"indefinite"
type"wav" /gt lt/bodygt
lt/htmlgt
34
The ltvideogt Element
The ltvideogt element defines a
reference to a video object stored as
recorded video. lttvideo src" http//www.anano
va.com/about/vap_windows_check.wmv" repeatCount"i
ndefinite" type"wmv" /gt
35
(No Transcript)
36
(No Transcript)
37
(No Transcript)
38
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 plugin