Home | | Internet & World Wide Web HOW TO PROGRAM | | Internet Programming | | Web Programming | Synchronized Multimedia Integration Language (SMIL)

Chapter: Internet & World Wide Web HOW TO PROGRAM - Multimedia: Audio, Video, Speech Synthesis and Recognition

| Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail |

Synchronized Multimedia Integration Language (SMIL)

The Synchronized Multimedia Integration Language (SMIL, pronounced “smile”) enables Web document authors to coordinate the presentation of a wide range of multimedia elements.

Synchronized Multimedia Integration Language (SMIL)

 

The Synchronized Multimedia Integration Language (SMIL, pronounced “smile”) enables Web document authors to coordinate the presentation of a wide range of multimedia elements. SMIL is an XML-based description language that allows static and dynamic text, audio and video to occur simultaneously and sequentially. Like Flash, SMIL provides a time reference for all instances of text and media. A SMIL document specifies the source (i.e., the URL) and presentation of multimedia elements. In XHTML, multimedia elements are autonomous entities that cannot interact without complicated scripts. In SMIL, multi-media elements can work together, enabling document authors to specify when and how multimedia elements appear in a document. For example, SMIL can produce TV-style con-tent, in which static and dynamic text, audio and video occur simultaneously and sequen-tially. One way to render SMIL documents is with RealPlayer. Apple’s Quicktime plug-in also plays SMIL in both Windows and Mac OS environments.

The example in Fig. 33.15 is a SMIL document that displays .jpg images for a variety of Java How to Program book covers. The images are displayed sequentially, and sound accompanies each image.

 

            <smil>

            <!-- Fig. 33.15: example1.smil -->

            <!-- Example SMIL Document           -->

                       

            <head>

            <layout>

            <root-layout height = "300" width = "280"

            background-color = "#bbbbee" title = "Example" />

 

            <region id = "image1" width = "177" height = "230"

            top = "35" left = "50" background-color =

            "#ffffff" />

            </layout>

            </head>

            <body>

            <seq>

<par>

<img src = "book1.jpg" region = "image1"

alt = "book 1" dur = "1s" fit = "fill" />

<audio src = "bounce.au" dur = ".5s" />

</par>

 

<par>

<img src = "book2.jpg" region = "image1"

alt = "book 2" dur = "1s" fit = "fill" />

<audio src = "bounce.au" dur = ".5s" />

</par>

 

<par>

<img src = "book3.jpg" region = "image1"

alt = "book 3" dur = "1s" fit = "fill" />

<audio src = "bounce.au" dur = ".5s" />

</par>

 

<par>

<img src = "book4.jpg" region = "image1"

alt = "book4" dur = "1s" fit = "fill" />

<audio src = "bounce.au" dur = ".5s" />

</par>

 

<par>

<img src = "book5.jpg" region = "image1"

alt = "book5" dur = "1s" fit = "fill" />

<audio src = "bounce.au" dur = ".5s" />

</par>

 

<par>

<img src = "book6.jpg" region = "image1"

alt = "book6" dur = "1s" fit = "fill" />

<audio src = "bounce.au" dur = ".5s" />

      </par>

      </seq>

      </body>

</smil>

 

 

Fig. 33.15  SMIL document with images and sound

 

Element head (lines 5–14) contains all the information for setting up the document. Lines 6–13 show element layout, which sets the layout attributes for the document.

 

Lines 7–8 set the document size, color and title using element root-layout. Lines 10–12 set a region for displaying objects (e.g., images) using element region. Attribute id is a unique identifier for each region. Attributes width and height specify the size of the region, and attributes top and left provide its relative position. Attribute back-ground-color sets the color of the region’s background.

 

Line 15 begins the element body, which encloses the contents of the document. Line 16 starts element seq, which sets its child elements to execute sequentially (i.e., in chro-nological order). A par element (starting on Line 18) sets its child elements to execute simultaneously.

 

Lines 19–20 show element img, which references an image. Attribute src contains the location of the image, and attribute alt provides a description of the image. Attribute region specifies the region in which the image is to be displayed; a fit value of fill sets the image to fill the entire region. Attribute dur describes how long the image appears on the screen (e.g., one second). Line 21 shows element audio, which references audio file bounce.au. The remaining elements in the document (lines 24–52) display different images and play the same audio file.

 

We can also embed a SMIL document in a Web page. We use the method described in Section 33.7 to embed the RealPlayer. Visitors to a Web site need the RealPlayer plug-in to view SMIL content. The plug-in is installed with RealPlayer basic and is available for download from RealNetworks at

 

www.real.com/player

 

Figure 33.16 uses an embedded RealPlayer to view our example SMIL document. On lines 14–17 we use the <embed> tag to add the RealPlayer to the Web page. The many attributes of this tag determine how our SMIL is displayed. First, set the src attribute on line 14 by giving it the location of the SMIL file. The file is located in the same folder so the path is simply the name of the file: example1.smil. The controls attribute on line 15 is set to ImageWindow; hiding the controls from users. The type attribute on line 16 allows the specification of the MIME type for the embedded object. In this case, we set type to audio/x-pn-realaudio-plugin to inform the browser that the Real-Player plug-in will display the SMIL file. Users do not have GUI controls, so the autostart attribute set to true on line 17 starts the movie automatically.


Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail


Copyright © 2018-2020 BrainKart.com; All Rights Reserved. Developed by Therithal info, Chennai.