Download - E0262 – MIS – Multimedia Storage Techniques SMIL – Synchronized Multimedia Integration Language
![Page 1: E0262 – MIS – Multimedia Storage Techniques SMIL – Synchronized Multimedia Integration Language](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb2e2/html5/thumbnails/1.jpg)
E0262 – MIS – Multimedia Storage Techniques
SMIL – Synchronized Multimedia Integration
Language
![Page 2: E0262 – MIS – Multimedia Storage Techniques SMIL – Synchronized Multimedia Integration Language](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb2e2/html5/thumbnails/2.jpg)
E0262 – MIS – Multimedia Storage Techniques
SMIL stands for Synchronized MultimediaIntegration LanguageSMIL is a language for describing audiovisualPresentationsEnables us to write interactive MM presentationSMIL is an XML tagging language- similar toHTML.SMIL presentations can be written using a text-editor
![Page 3: E0262 – MIS – Multimedia Storage Techniques SMIL – Synchronized Multimedia Integration Language](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb2e2/html5/thumbnails/3.jpg)
E0262 – MIS – Multimedia Storage Techniques
SMIL offers accessibility options and powerful features not present in other media players.
Macro products like Flash Real audio's Real playerMicrosoft's powerpointApple's quicktime
Limitations: They rely on pluginsDoesn't benefit from modern browserUnsupported by most of mobile devices.
![Page 4: E0262 – MIS – Multimedia Storage Techniques SMIL – Synchronized Multimedia Integration Language](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb2e2/html5/thumbnails/4.jpg)
E0262 – MIS – Multimedia Storage Techniques
Multimedia track synchronized with HTML content
Content based NavigationUser InteractionsCustom extensions
![Page 5: E0262 – MIS – Multimedia Storage Techniques SMIL – Synchronized Multimedia Integration Language](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb2e2/html5/thumbnails/5.jpg)
E0262 – MIS – Multimedia Storage Techniques
Web Radio
We have media player, HTML content that is synchronized with media
Web RadioWeb Radio
![Page 6: E0262 – MIS – Multimedia Storage Techniques SMIL – Synchronized Multimedia Integration Language](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb2e2/html5/thumbnails/6.jpg)
E0262 – MIS – Multimedia Storage Techniques
Content based navigation
Can jump from one section to another sequentially or from table of contents
![Page 7: E0262 – MIS – Multimedia Storage Techniques SMIL – Synchronized Multimedia Integration Language](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb2e2/html5/thumbnails/7.jpg)
E0262 – MIS – Multimedia Storage Techniques
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
![Page 8: E0262 – MIS – Multimedia Storage Techniques SMIL – Synchronized Multimedia Integration Language](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb2e2/html5/thumbnails/8.jpg)
E0262 – MIS – Multimedia Storage Techniques
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 <img>
![Page 9: E0262 – MIS – Multimedia Storage Techniques SMIL – Synchronized Multimedia Integration Language](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb2e2/html5/thumbnails/9.jpg)
E0262 – MIS – Multimedia Storage Techniques
SMIL & HTML Content structure and Multimedia audio video is handled by HTML 5Transitions and animations are handled by CSS 3Time structure synchronization and user interactions are handled by SMIL TimingsAnd Timesheets.
![Page 10: E0262 – MIS – Multimedia Storage Techniques SMIL – Synchronized Multimedia Integration Language](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb2e2/html5/thumbnails/10.jpg)
E0262 – MIS – Multimedia Storage Techniques
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 <smil> tag and end with a </smil> closing tag. * SMIL documents must contain a <body> tag for storing the contents of the presentation. * SMIL documents can have a <head> element (like HTML) for storing metadata information about the document itself, as well as presentation layout information.
![Page 11: E0262 – MIS – Multimedia Storage Techniques SMIL – Synchronized Multimedia Integration Language](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb2e2/html5/thumbnails/11.jpg)
E0262 – MIS – Multimedia Storage Techniques
<smil> <head> <layout> ... </layout> </head> <body> ... </body> </smil>
Simple SMIL file
![Page 12: E0262 – MIS – Multimedia Storage Techniques SMIL – Synchronized Multimedia Integration Language](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb2e2/html5/thumbnails/12.jpg)
E0262 – MIS – Multimedia Storage Techniques
LayoutWithin the head tags you must define layout tags<layout></layout>Within these layout tags you must define a root a root layout, thisis where you define the size of the presentation and other attributes(such as the background colour).<root-layout height="500" width="500" background-color="black" id="main" />Parallel and SequenceThere are two main tags used when defining the order of thedisplaying media<seq>
![Page 13: E0262 – MIS – Multimedia Storage Techniques SMIL – Synchronized Multimedia Integration Language](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb2e2/html5/thumbnails/13.jpg)
E0262 – MIS – Multimedia Storage Techniques
Sequence<smil> <body> <seq repeatCount="indefinite"> <img src="image1.jpg" dur="3s" /> <img src="image2.jpg" dur="3s" /> </seq> </body></smil> A <seq> element defines a sequence to display. The repeatCount attribute defines an indefinite loop. Each <img> element has a src attribute to define the image source and a dur attribute to define the duration of the display.
![Page 14: E0262 – MIS – Multimedia Storage Techniques SMIL – Synchronized Multimedia Integration Language](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb2e2/html5/thumbnails/14.jpg)
E0262 – MIS – Multimedia Storage Techniques
Media driven Timings
![Page 15: E0262 – MIS – Multimedia Storage Techniques SMIL – Synchronized Multimedia Integration Language](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb2e2/html5/thumbnails/15.jpg)
E0262 – MIS – Multimedia Storage Techniques
Event Driven Timing
![Page 16: E0262 – MIS – Multimedia Storage Techniques SMIL – Synchronized Multimedia Integration Language](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb2e2/html5/thumbnails/16.jpg)
E0262 – MIS – Multimedia Storage Techniques
![Page 17: E0262 – MIS – Multimedia Storage Techniques SMIL – Synchronized Multimedia Integration Language](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb2e2/html5/thumbnails/17.jpg)
E0262 – MIS – Multimedia Storage Techniques
RegionsStill within the layout tags you need to define regions within yourpresentation.A region is a rectangular/square shaped object which mediaappears in.To define a region with the layout use the following.<region id="someID" width="200" height="200" top="10"left="10" background-color="white" z-index="1" />The id is the unique identifier you give this region, the height andwidth define the size of the region, the top and left attributes definehow far off the top and left margins of the presentation area theregion lies, the background-color defines the background colourand the z-index attribute defines the order of the stacking of theregions.
![Page 18: E0262 – MIS – Multimedia Storage Techniques SMIL – Synchronized Multimedia Integration Language](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb2e2/html5/thumbnails/18.jpg)
E0262 – MIS – Multimedia Storage Techniques
LayoutWe will make the difference between:Absolute Positioning,Relative Positioning
![Page 19: E0262 – MIS – Multimedia Storage Techniques SMIL – Synchronized Multimedia Integration Language](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb2e2/html5/thumbnails/19.jpg)
E0262 – MIS – Multimedia Storage Techniques
Image to our presentation <smil> <head> <layout> <root-layout width="300" height="300" background-color="white"/> <region id="cows" top="0" left="0" width="300" height="197"/> </layout> </head> <body> <img src="cows.jpg" region="cows"/> </body> </smil>
![Page 20: E0262 – MIS – Multimedia Storage Techniques SMIL – Synchronized Multimedia Integration Language](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb2e2/html5/thumbnails/20.jpg)
E0262 – MIS – Multimedia Storage Techniques
![Page 21: E0262 – MIS – Multimedia Storage Techniques SMIL – Synchronized Multimedia Integration Language](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb2e2/html5/thumbnails/21.jpg)
E0262 – MIS – Multimedia Storage Techniques
![Page 22: E0262 – MIS – Multimedia Storage Techniques SMIL – Synchronized Multimedia Integration Language](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb2e2/html5/thumbnails/22.jpg)
E0262 – MIS – Multimedia Storage Techniques
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.
![Page 23: E0262 – MIS – Multimedia Storage Techniques SMIL – Synchronized Multimedia Integration Language](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb2e2/html5/thumbnails/23.jpg)
E0262 – MIS – Multimedia Storage Techniques
<smil> <head> <layout> <rootlayout width="300" height="200" backgroundcolor="white" /> <region id="vim_icon" left="50%" top="40%" width="32" height="32" /> </layout> </head> <body> <img src="vim32x32.gif" alt="The vimicon" region="vim_icon" /> </body> </smil>
![Page 24: E0262 – MIS – Multimedia Storage Techniques SMIL – Synchronized Multimedia Integration Language](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb2e2/html5/thumbnails/24.jpg)
E0262 – MIS – Multimedia Storage Techniques
![Page 25: E0262 – MIS – Multimedia Storage Techniques SMIL – Synchronized Multimedia Integration Language](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb2e2/html5/thumbnails/25.jpg)
E0262 – MIS – Multimedia Storage Techniques
When two regions overlay To be sure that one region is over the other, add zindex attribute to <region>. 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.
![Page 26: E0262 – MIS – Multimedia Storage Techniques SMIL – Synchronized Multimedia Integration Language](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb2e2/html5/thumbnails/26.jpg)
E0262 – MIS – Multimedia Storage Techniques
<smil> <head> <layout> <rootlayout width="300" height="200" backgroundcolor="white" /> <region id="region_1" left="50" top="50" width="150" height="125" zindex="2"/> <region id="region_2" left="25" top="25" width="100" height="100" zindex="1"/> </layout> </head> <body> <par> <text src="text1.txt" region="region_1" /> <text src="text2.txt" region="region_2" /> </par> </body> </smil>
![Page 27: E0262 – MIS – Multimedia Storage Techniques SMIL – Synchronized Multimedia Integration Language](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb2e2/html5/thumbnails/27.jpg)
E0262 – MIS – Multimedia Storage Techniques
![Page 28: E0262 – MIS – Multimedia Storage Techniques SMIL – Synchronized Multimedia Integration Language](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb2e2/html5/thumbnails/28.jpg)
E0262 – MIS – Multimedia Storage Techniques
Media typesSMIL can integrate many types of media (though this issometimes limited by the application).Like HTML you need to define a source for your media. Youalso need to define a region of the presentation in which the playthe media.<text src="someText.txt" region="someRegion" />We can also define the amount of time that the media plays forby using the `dur' attribute, we can set how far into the mediawe want it to start playing (only useful with sound and video),how much of the region we want the media to fill and give themedia an id.<video src="someVid.mpg" region="someRegion"begin="10s" dur="50s" repeat="2"fill="fit" id="someVid" />
![Page 29: E0262 – MIS – Multimedia Storage Techniques SMIL – Synchronized Multimedia Integration Language](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb2e2/html5/thumbnails/29.jpg)
E0262 – MIS – Multimedia Storage Techniques
![Page 30: E0262 – MIS – Multimedia Storage Techniques SMIL – Synchronized Multimedia Integration Language](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb2e2/html5/thumbnails/30.jpg)
E0262 – MIS – Multimedia Storage Techniques
![Page 31: E0262 – MIS – Multimedia Storage Techniques SMIL – Synchronized Multimedia Integration Language](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb2e2/html5/thumbnails/31.jpg)
E0262 – MIS – Multimedia Storage Techniques
![Page 32: E0262 – MIS – Multimedia Storage Techniques SMIL – Synchronized Multimedia Integration Language](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb2e2/html5/thumbnails/32.jpg)
E0262 – MIS – Multimedia Storage Techniques
![Page 33: E0262 – MIS – Multimedia Storage Techniques SMIL – Synchronized Multimedia Integration Language](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb2e2/html5/thumbnails/33.jpg)
E0262 – MIS – Multimedia Storage Techniques
The <audio> element defines a reference to an audio object stored as recorded audio. <html xmlns:t="urn:schemas-microsoft- com:time"> <head> <?import namespace="t" implementation="#default#time2"> </head> <body> <t:audio src="liar.wav" repeatCount="indefinite" type="wav" /> </body> </html>
![Page 34: E0262 – MIS – Multimedia Storage Techniques SMIL – Synchronized Multimedia Integration Language](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb2e2/html5/thumbnails/34.jpg)
E0262 – MIS – Multimedia Storage Techniques
The <video> Element The <video> element defines a reference to a video object stored as recorded video.<t:video src="http://www.ananova.com/about/vap_windows_check.wmv"repeatCount="indefinite" type="wmv" />
![Page 35: E0262 – MIS – Multimedia Storage Techniques SMIL – Synchronized Multimedia Integration Language](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb2e2/html5/thumbnails/35.jpg)
E0262 – MIS – Multimedia Storage Techniques
![Page 36: E0262 – MIS – Multimedia Storage Techniques SMIL – Synchronized Multimedia Integration Language](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb2e2/html5/thumbnails/36.jpg)
E0262 – MIS – Multimedia Storage Techniques
![Page 37: E0262 – MIS – Multimedia Storage Techniques SMIL – Synchronized Multimedia Integration Language](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb2e2/html5/thumbnails/37.jpg)
E0262 – MIS – Multimedia Storage Techniques
![Page 38: E0262 – MIS – Multimedia Storage Techniques SMIL – Synchronized Multimedia Integration Language](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb2e2/html5/thumbnails/38.jpg)
E0262 – MIS – Multimedia Storage Techniques
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