PANVEGA’s Blog

DotNet Development, SharePoint Customizing, Silverlight, MS Infrastructure and other tips and tricks

Synchronized Multimedia Integration Language (SMIL)

Posted by PANVEGA on February 10, 2009

Streaming Media via HTTP/SMIL:

SMIL, the Synchronized Multimedia Integration Language, is a W3C recommended XML markup language for describing multimedia presentations. It defines markup for timing, layout, animations, visual transitions, and media embedding, among other things. SMIL allows the presentation of media items such as text, images, video, and audio, as well as links to other SMIL presentations, and files from multiple web servers. SMIL markup is written in XML, and has similarities to HTML.

SMIL can be used to:

  • Link and associate files within media players: from synchronized slide shows to captioned video
  • Define layout regions within media players
  • Establish and notate timing marks
  • Inter-operable with other XML base languages that require timing and synchronization.

SMIL files take either a .smi or .smil file extension. However, SAMI files also use .smi, which creates some ambiguity at first glance. As a result, SMIL files commonly use the .smil file extension to avoid confusion.

The “layout” element determines how the elements in the document’s body are positioned on an abstract rendering surface (either visual or acoustic).

If a document contains no layout element, the positioning of the body elements is implementation-dependent. A SMIL document can contain multiple alternative layouts by enclosing several layout elements within a “switch” element. This can be used for example to describe the document’s layout using different layout languages. The following example shows how CSS2 can be used as alternative to the SMIL basic layout language:

e.g.  <a href=”example.smil”  target=”_blank”>RTSP File</a>

example.smil you see belowe:

<smil>
<head>
<layout>
<root-layout width=”450″ height=”300″ background-color=”#FAEBD7″ />
<region id=”region” left=”85″ top=”85″ width=”280″ height=”120″
background-color=”#000080″ fit=”meet” />
</layout>
</head>
<body>
<video src=”rtsp://zaik-rm.rrz.uni-koeln.de/rrzk/streaming/dokumentation/example.rm” region=”region” />
</body>
</smil>

The region where the video will play is given a name, “PixChannel” in this case and a title which is also “PixChannel”. The upper left corner of the Pix will be 160 pixels from the left side of the playback area in the Real Player and Zero pixels down from the top. If you above you can see this placement. The video size will be 120 pixels tall by 160 in width. The background color of the region is set to the hexi-decimal color. The FIT determines how the pix fits into its region. In this case it will grow to fill the region no matter how large it was originally. In our example the region and the images are both 160 pixels wide by 120 tall so they match without the need to grow or shrink.

screencap3

Your SMIL layout can be like this above:

The body of the SMI file links the layout of the page with the source files such as RealPix, Real Video and the RealText. Let’s again look at how the RealPix files are tied in:

Let’s take a look at the code for this file which is named example.smil

<smil>
<head>
<meta name="title" content="WDVL Demo" />
<meta name="author"
	content="jrule@ruleweb.com" />
<meta name="copyright" content="©1998" />
<layout type="text/smil-basic-layout">
<region id	= "VideoChannel"
	title	= "VideoChannel"
	left	= "0"
	top	= "0"
	height	= "120"
	width	= "160"
	background-color = "#888888"
	fit	= "fill"/>
<region id	= "PixChannel"
	title	= "PixChannel"
	left	= "160"
	top	= "0"
	height	= "120"
	width	= "160"
	background-color = "#888888"
	fit	= "fill"/>
<region id	= "TextChannel"
	title	= "TextChannel"
	left	= "0"
	top	= "120"
	height	= "50"
	width	= "320"
	background-color = "#888888"
	fit	= "fill"/>
</layout>
</head>
<body>
<par title="multiplexor">
<video src	= "wdvl.rm"
	id	= "Video"
	region	= "VideoChannel"
	title	= "Video"/>
<img src	= "wdvl.rp"
	id	= "Headline Pix"
	region	= "PixChannel"
	title	= "Headline Pix"
        end="8s"/>
<text src	= "wdvl.rt"
	id	= "Ticker"
	region	= "TextChannel"
	title	= "Ticker"
        dur="5s" begin="2s"/>
</par>
</body>
</smil>

Much like an HTML file the SMIL starts with the opening <SMIL> tag and then the <head> tag. In the head of the SMI file the META tags describing the ownership, authorship and date of the SMI file are defined. Additionally and more importantly the overall layout of the page is defined. The placement of the video, pix and text are defined in a way similar to Cascading Style Sheets. The placement is defined by giving coordinates for the upper left corner of the element. Let’s look at how the pix are placed using the following line. The dur (duration) are the seconds you wanna play the stream and the begin as well. So the stream is going to be seen for 3 seconds.

Notice that the RealVideo, RealPix and RealText files are contained between two tags <par> and </par>. This means that all the files contained in this area are played in parallel. Other ways to play the files are possible, but are beyond the scope of this article.

As mentioned, SMIL is not yet native to web browsers, so in order to put SMIL in a web page, one must embed it and open it in a plug-in such as Apple Quicktime or Microsoft’s Windows Media Player.

Captioned videos can be streamed in a number of different formats. Each format has it’s strengths and weaknesses, as we shall see. The QuickTime player supports captioning (using SMIL) in two ways; “embedded” captioning and “linked” captioning.

Advanced Stream Redirector (ASX)

If you wanna stream any Windows Media files with more funtionallity like the SMIL you have to use the ASX format. The Advanced Stream Redirector (ASX) format is a type of XML metafile designed to store a list of Windows Media files to play during a multimedia presentation. It is used frequently on streaming video servers where multiple ASF files are to be played in succession. Both RTSP and MMS streaming protocols are supported, as well as HTTP.

<ASX VERSION = "3.0">
   <TITLE>Beispiel III für eine ASX Datei</TITLE>
   <AUTHOR>Panvega</AUTHOR>
   <COPYRIGHT>(c) 2009 Panvega</COPYRIGHT>
   <ENTRY>
     <TITLE>Der erste ENTRY Eintrag </TITLE>
     <ABSTRACT>some text</ABSTRACT>
     <AUTHOR>Sebastian Schetter</AUTHOR>
     <COPYRIGHT>(c) 2009 Panvega</COPYRIGHT>
     <REF HREF = "mms://ZAIK-WM.RRZ.UNI-KOELN.DE/rrzk/streaming/dokumentation/kleinesvideo.wmv"/>
   </ENTRY>
   <ENTRY>
     <TITLE>Der zweite ENTRY Eintrag </TITLE>
     <ABSTRACT>some text</ABSTRACT>
     <AUTHOR>Panvega</AUTHOR>
     <COPYRIGHT>(c) 2009 Panvega</COPYRIGHT>
     <REF HREF = "mms://domain/rrzk/streaming/dokumentation/gehtjagarnich.wmv"/>
     <REF HREF = "mms://domain/rrzk/streaming/dokumentation/piggy56.wma"/>
     <REF HREF = "mms://domain/rrzk/streaming/dokumentation/kleinesvideo.wmv"/>
   </ENTRY>
 </ASX>

More Information:

http://msdn.microsoft.com/en-us/library/ms983653.aspx

http://www.uni-koeln.de/rrzk/multimedia/dokumentation/streaming/metadateien.html

http://www.w3.org/TR/2005/REC-SMIL2-20050107/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: