The new way of presenting web lectures SMIL The new way of presenting web lectures 27/9/2001 Tadeusz Szymocha
Content What is SMIL? Advantages and disadvantages Basic Tags with Examples RealPix and RealText Bandwidth considerations Links Final Examples 27/9/2001 Tadeusz Szymocha
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
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
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
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
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
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="http://www.bu.edu/three.txt"/> </body> </smil> Simplest_Example 27/9/2001 Tadeusz Szymocha
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
27/9/2001 Tadeusz Szymocha
27/9/2001 Tadeusz Szymocha
27/9/2001 Tadeusz Szymocha
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
<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
<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
RealPix and RealText Can enhance the overall presentation Simplify SMIL file Developed by Real Networks 27/9/2001 Tadeusz Szymocha
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
Links http://www.helio.org/products/smil/tutorial/ http://www.bu.edu/webcentral/learning/ http://www.webreview.com/1999/03_12/designers/03_12_99_1.shtml http://www.w3.org/TR/REC-smil/ 27/9/2001 Tadeusz Szymocha
<SMIL> <HEAD> <META NAME="title" CONTENT="WebReview Demo"/> <META NAME="author" CONTENT="jrule@ruleweb.com"/> <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
Screen Snapshot Final_Example 27/9/2001 Tadeusz Szymocha
Example of the Web Lecture Slides a01443s3t4 Power Point a01491s1t2 27/9/2001 Tadeusz Szymocha
27/9/2001 Tadeusz Szymocha
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