Download presentation
Presentation is loading. Please wait.
1
The new way of presenting web lectures
SMIL The new way of presenting web lectures 27/9/2001 Tadeusz Szymocha
2
Content What is SMIL? Advantages and disadvantages
Basic Tags with Examples RealPix and RealText Bandwidth considerations Links Final Examples 27/9/2001 Tadeusz Szymocha
3
SMIL – Synchronized Multimedia Integration Language.
What Is SMIL? SMIL – Synchronized Multimedia Integration Language. It is a markup language designed for preparing synchronized presentations consisting of different kind of media such as video, audio, text and graphics. 27/9/2001 Tadeusz Szymocha
4
Advantages of SMIL Keeps original content
Allows to use clips in different locations Time control Layout of the presentation Provide alternate presentation Can be produced with any text editor 27/9/2001 Tadeusz Szymocha
5
Disadvantages of SMIL Lack of the final specification
Lack of editors and development tools In one region can play only one media 27/9/2001 Tadeusz Szymocha
6
General Information SMIL tags and attributes must be lowercase
Attribute values must be enclosed in double quotation marks File extension .smi 27/9/2001 Tadeusz Szymocha
7
Various Types of Clips animation Flash Player file (.swf).
audio RealAudio (.rm) or MP3 (.mp3) img JPEG (.jpg), GIF (.gif), or PNG images (.png) ref Any clip type, RealPix file (.rp). text Static text clips (.txt). textstream Streaming RealText clips (.rt). video Video such as RealVideo (.rm). 27/9/2001 Tadeusz Szymocha
8
The Simplest Example <smil> <body>
<audio src="rtsp://realserver.bu.edu:554/one.mp3"/> <img src="rtsp://realserver.bu.edu:554/bigtwo.gif"/> <text src=" </body> </smil> Simplest_Example 27/9/2001 Tadeusz Szymocha
9
Layout Example <smil> <head> <layout> <root-layout width="600" height="600"/> <region id="image1" top="5" left="5" width="200" height="200" background-color="red"/> <region id="image2" top="250" left="200" width="300" height="100" background-color="blue" z-index="2"/> </layout> </head> <body> ...media clip tags will go here... </body> </smil> Layout_Example Layer1_Example Layer2_Example 27/9/2001 Tadeusz Szymocha
10
27/9/2001 Tadeusz Szymocha
11
27/9/2001 Tadeusz Szymocha
12
27/9/2001 Tadeusz Szymocha
13
Timing <audio src="rtsp://realserver.bu.edu:554/driving.rm"
begin="20.5s" /> <audio src="rtsp://realserver.bu.edu:554/driving.rm" begin="20.5s" end="30.0s" /> <audio src="rtsp://realserver.bu.edu:554/driving.rm" dur="9.5s" /> <audio src="rtsp://realserver.bu.edu:554/driving.rm" clip-begin="10s" clip-end="15s"/> 27/9/2001 Tadeusz Szymocha
14
<seq> Example <seq>
<audio src="rtsp://realserver.bu.edu:554/driving.rm" dur="4s" /> <img region ="one" src="images/pict1.gif” dur="4s" /> <img region ="two" src="images/pict2.gif” dur="4s" /> <img region ="three" src="images/pict3.gif“ dur="4s" /> <img region ="four" src="images/pict4.gif" dur="4s"/> </seq> Seq_Example 27/9/2001 Tadeusz Szymocha
15
<par> Example <par>
<audio src="rtsp://realserver.bu.edu:554/driving.rm" dur="10s" /> <img region ="one" src="images/pict1.gif" dur="10s"/> <img region ="two" src="images/pict2.gif" dur="10s"/> <img region ="three" src="images/pict3.gif"dur="10s" /> <img region ="four" src="images/pict4.gif"dur="10s" /> </par> Parallel_Example 27/9/2001 Tadeusz Szymocha
16
RealPix and RealText Can enhance the overall presentation
Simplify SMIL file Developed by Real Networks 27/9/2001 Tadeusz Szymocha
17
Bandwidth Consideration
Each element of the presentation requires some amount of bandwidth Total bandwidth of all the elements must not exceed the total bandwidth available to the target viewer Specific clips must stay within the bandwidth boundaries established by their respective files 27/9/2001 Tadeusz Szymocha
18
Links http://www.helio.org/products/smil/tutorial/
27/9/2001 Tadeusz Szymocha
19
<SMIL> <HEAD> <META NAME="title" CONTENT="WebReview Demo"/> <META NAME="author" <META NAME="copyright" CONTENT="©1999"/> <LAYOUT > <ROOT_LAYOUT WIDTH="640" HEIGHT="290"/> <REGION ID="PixChannel" TITLE="PixChannel" LEFT="0" TOP="0" HEIGHT="240" WIDTH=“320" BACKGROUND-COLOR=“black" FIT="fill"/> <REGION ID="VideoChannel" TITLE="VideoChannel" LEFT=“320" <REGION ID="TextChannel" TITLE="TextChannel" LEFT="0" TOP="240" HEIGHT="50" WIDTH=“640" BACKGROUND-COLOR=“black" FIT="hidden"/> </LAYOUT> </HEAD> <BODY> <PAR TITLE="multiplexor"> <VIDEO SRC=“video_ex.rm" ID="Video" REGION="VideoChannel" TITLE="Video"/> <IMG SRC=“pix_ex.rp" ID="Headline Pix" REGION="PixChannel" TITLE="Headline Pix"/> <TEXT SRC=“text_ex.rt" ID="Ticker" REGION="TextChannel" TITLE="Ticker"/> </PAR> </BODY> </SMIL> 27/9/2001 Tadeusz Szymocha
20
Screen Snapshot Final_Example
27/9/2001 Tadeusz Szymocha
21
Example of the Web Lecture
Slides a01443s3t4 Power Point a01491s1t2 27/9/2001 Tadeusz Szymocha
22
27/9/2001 Tadeusz Szymocha
23
What have we learned? SMIL describes synchronized multimedia presentations It is easy to decide what, when and where should display RealPix and RealText can improve your presentation The best way to learn is try it yourself! 27/9/2001 Tadeusz Szymocha
Similar presentations
