11 pages

English

SMIL Language Tutorial

Musar - Realnetworks

Le téléchargement nécessite un accès à la bibliothèque YouScribe
Tout savoir sur nos offres

11 pages

English

Le téléchargement nécessite un accès à la bibliothèque YouScribe
Tout savoir sur nos offres

A propos
Informations
Extrait

Description

1I.As the Web has grown in usage from millions to tens of millions over the past three years, contentproviders and web audiences have come to appreciate and value the impact multimedia can have oncreating richer experiences.The markup language standard that defined the Web, HTML, had its origin in enabling the compositionand presentation of static media (text, images). In January 1997, the W3C sought to work with membersof the Internet community to define a markup language that would be specifically designed to address theunique requirements of dynamic media, and usher in the next wave of dynamic web content.SMIL is a proposed standard that unlocks the potential of the Web to synchronize a wide range of time-based multimedia and combine them all in a single presentation.SMIL is a simple but powerful XML compliant, mark-up language that coordinates when and howmultimedia files play. A SMIL file (file extension .smi) can be created with any text editor or wordprocessor than saves output as plain text with line breaks. Users familiar with HTML markup will pickup SMIL quickly. An example of a simple SMIL file that lists multiple media files played in sequence is

1. SMIL General Rulesfile, keep the following general XML-compliant syntax rules in mind:1. and TagThe SMIL file must start with a tag and end with the closing tag. All other mark-up … all ...

Informations

Publié par	Musar
Nombre de lectures	23
Langue	English

Extrait

Cwu

Page

04/08/98

SMIL Language Tutorial

Introduction

As the Web has grown in usage from millions to tens of millions over the past three years, content

providers and web audiences have come to appreciate and value the impact multimedia can have on

creating richer experiences.

The markup language standard that defined the Web, HTML, had its origin in enabling the composition

and presentation of static media (text, images).

In January 1997, the W3C sought to work with members

of the Internet community to define a markup language that would be specifically designed to address the

unique requirements of dynamic media, and usher in the next wave of dynamic web content.

SMIL is a proposed standard that unlocks the potential of the Web to synchronize a wide range of time-

based multimedia and combine them all in a single presentation.

II.

Creating a SMIL file

SMIL is a simple but powerful XML compliant, mark-up language that coordinates when and how

multimedia files play.

A SMIL file (file extension .smi) can be created with any text editor or word

processor than saves output as plain text with line breaks.

Users familiar with HTML markup will pick

up SMIL quickly.

An example of a simple SMIL file that lists multiple media files played in sequence is

shown below.

<smil>

</smil>

SMIL General Rules

SMIL has many similarities to HTML, but also some important differences. When you create your SMIL

file, keep the following general XML-compliant syntax rules in mind:

<smil> and </smil> Tag

The SMIL file must start with a <smil> tag and end with the </smil> closing tag.

All other mark-up

appears between these two tags:

<smil>

… all other SMIL mark-up …

</smil>

SMIL tags and attributes must all be lowercase.

A tag that does not have a corresponding end tag (for example, the <smil> tag has the end tag </smil>),

must close with a forward slash.

For example:

Cwu

Page

04/08/98

Attribute values, such as "first.wav" shown above, must be enclosed in double quotation marks.

As in HTML, comments can be added to a SMIL file like this:

III. Structure of a SMIL file

Header Section

The SMIL file can have a header section that defines aspects of the entire presentation, such as its title:

<smil>

<head>

...all header information...

</head>

<body>

...all body information...

</body>

</smil>

If you use a <head> tag, you must also use a <body> tag to define the remainder of the file.

Header Information

In the SMIL file header, you typically provide author, title, and copyright information that shows up in the

multimedia presentation status panel. To do this, you use <meta> tags that have name and content

attributes as shown here:

<head>

</head>

Alternately, you can simply include the <title> tag to add just a title:

<head>

<title>Multimedia My Way</title>

</head>

Within the body, you can override header elements as needed:

<head>

</head>

<body>

</body>

Cwu

Page

04/08/98

When the second file in the example above plays, the title shown in the multimedia presentation changes

from "Multimedia My Way" to "Planning is the Key."

Specifying Source Media File Locations

The source media file in a multimedia presentation is specified in a SMIL file with the SMIL <src> tag,

which describes the source media file type and location:

The first part of this tag specifies the type of source media file:

audio

Use "audio" for any type of audio file.

For example, RealAudio, WAV, SND, AIFF, or AU

video

Specify "video" for any type of video file. For example, RealVideo, AVI, QuickTime MOV, MPEG.

The

“video”

SMIL source tag can be used for animation, VRML, or other files that show continuous, video-

style motion.

image

Use "image" for still images such as GIFs or JPEGs.

text

Use "text" for simple text files or streaming text files.

ref

Specify "ref" for any other file type, such as a multimedia synchronization file.

Following the file type, the

src

attribute lists the file location.

Linking to Files on a Server

When a multimedia presentation streams over a network, the media source files reside on a server. Each

src attribute in the SMIL file provides a URL to a media file:

src="http://webserver.company.com:6060/audio/first.ra"

This URL breaks down into the following parts:

•

http://

This designates the server's streaming protocol.

•

webserver.company.com

The address varies for each Web server. Instead of a name, it may use a TCP/IP address such as

172.2.16.230.

•

/audio/

The Web server administrator sets up the directory structure, which may be more than one level deep as

shown in this example.

•

first.ra

This is the chosen src file name.

In this case, a RealAudio file called “first.ra”

Cwu

Page

04/08/98

IV.

Using Relative URLs

If the SMIL presentation includes many src files that are on the same server, each URL can be relative to a

base target defined in the SMIL header:

<head>

</head>

<body>

</body>

Because the third file has a full URL specified for it, the base target is ignored. For the first two files,

however, the src values are appended to the base target, effectively giving the files these URLs:

http://server.company.com/audio/first.wav

http://server.company.com/video/first.mov

The relative syntax for SMIL files works exactly like relative links in HTML. Additional information

about SMIL relative src syntax can be found in an HTML reference.

Linking to Local Files

If the SMIL presentation source files reside on the user's local computer (as with a multimedia tutorial

included with a software application, for example) include the SMIL file locally as well. The

src

attributes

in the SMIL file list presentation files in this format:

src="file://audio/first.ra"

This example is a local, relative link to a file that resides one level below the SMIL file in the audio

directory.

For local access, you typically want to use relative links because you cannot be sure where users

will place files on their machine.

Alternately, absolute, local links can be used to specify exact locations.

The syntax for absolute links is the same as with HTML.

Warning:

For local SMIL files, Microsoft Internet Explorer 3.0 does not recognize <head> and <title>, and it tries

to display the files as HTML. To support this browser, omit the <head> and <title> tags. This problem

does not occur with Netscape Navigator or Internet Explorer 4.0. Nor does it occur when you stream files

from RealServer to Internet Explorer 3.0.

VI.

Organizing a Presentation

SMIL allows Web authors to specify how and when each clip plays. The following sections explain how to

play files in sequence or parallel, as well as how to add timing information to fine-tune the presentation.

VII.

Playing Files in Sequence

Cwu

Page

04/08/98

To play clips in sequence, use the <seq> (“sequence”) SMIL tag. In the following example, the second

clip begins when the first clip finishes.

<seq>

</seq>

VIII.

Playing Files Simultaneously

Two or more clips can be played at the same time by using the <par> ("parallel") SMIL tag.

For example,

the following plays a synchronized group of WAV, MOV, and AAF clips:

<par>

</par>

IX.

Specifying Delay, Start, and End Times

An offset for when a clip starts and how long it plays by specifying delay, clip start, and clip end times as

described below. These time elements use the format:

hh:mm:ss.xy

where hh is hours, mm is minutes, ss is seconds, x is tenths of seconds, and y is hundredths of seconds.

For example, a value of "20s" means 20 seconds.

Setting Delay Times

A delay attribute like the following can be used to specify starting a clip at a specific point within the

presentation timeline:

delay="20.5s"

In a <par> grouping, this delays the start of the clip by 20.5 seconds. In a <seq> grouping, this adds 20.5

seconds of blank time between clips. The delay attribute works for images, audio, video, or any other file

type.

XI.

Setting Clip-begin and Clip-end Times

Clip start and clip end attributes such as the following specify the clip's internal timing mark where

playback begins and ends:

clip-begin="10.5s" clip-end="50.7s"

In this example, the clip starts playing at its internal 10.5-second mark rather than at its normal

beginning. It stops playing when it reaches its 50.7-second mark, playing for a total of 40.2 seconds.

Cwu

Page

04/08/98

Start and End Times for Images

If you specify a start and end time for a clip that does not have an internal timeline (such as a graphic),

the times control how long the file appears in the presentation timeline. Applying a clip-begin time of

10.5 and a clip-end time of 50.7 to a graphic image, for example, makes the image appear 10.5 seconds

after the presentation begins. So the start time in this case works like a "delay." The graphic then

disappears 50.7 seconds into the presentation.

Example

The following example shows two audio files with different timing options:

<par>

</par>

The timing options modify the <par> tag so that the two clips start at different times. The first clip begins

to play immediately, but starts at 30.4 seconds into its timeline. Because it ends at 60.4 seconds into its

timeline, this clip plays for exactly 30 seconds.

The second clip is delayed for 28 seconds. That means it

overlaps the first clip by 2 seconds. It starts at 2.4 seconds into its timeline and ends at 13.7 seconds into

its timeline, thus playing for 11.3 seconds. The total length of this group presentation is 30 seconds for the

first clip, plus 11.3 seconds for the second clip, minus the 2 second overlap: 39.3 seconds.

XII.Combining <seq> and <par> Tags

<seq> and <par> tags can be combined and nested as needed.

Note that the organization of these tags

greatly affects the presentation playback.

<seq>

file 1

<par>

file 2

file 3

</par>

file 4

</seq>

In the example above, file 1 plays first. When file 1 finishes, file 2 and file 3 play together. When both file

2 and file 3 have finished, file 4 plays. Very different results, though, occur if the <seq> and <par>

groupings are switched:

<par>

file 1

<seq>

file 2

file 3

</seq>

file 4

</par>

Cwu

Page

04/08/98

In the example, file 1, file 2, and file 4 all begin at the same time. When file 2 finished, file 3 starts. The

following figure illustrates the difference between these different groupings.

XIII.

Switching Between Alternate Choices

With the <switch> SMIL tag, authors can specify multiple options for presentation to the viewer:

</switch>

The <switch> tag specifies any number of choices. The multimedia presentation will be presented based

on the first condition that meets the trigger.

If the trigger is system-language for example, each switch

statement lists the location of a file for a different language. The SMIL file then chooses a file according

to its language preference setting.

Switching Between Languages

SMIL supports many languages, such as:

Language Trigger Value:

English

French

German

Japanese

The following example shows a video slide show with separate audio narrations in English, French, and

German. Based on its language preference and the system-language value in the SMIL file, RealPlayer

determines which file to play:

<par>

</switch>

</par>

XIV.

Switching Between Bit Rates

To take advantage of high bandwidth connections available to some users, authors can encode different

versions of media files for different bit rates. The <switch> SMIL tag can be used to define the choices

Cwu

Page

04/08/98

client can make based on its available bandwidth.

As shown below, you group files with <par> tags,

using the system-bitrate attribute to list the approximate bandwidth (in Kbps) each group consumes:

</par>

</par>

</par>

</switch>

Always list system bit rate options from highest to lowest.

SMIL ptions will be evaluated in the order

listed.

The first viable option that meets the trigger condition will be selected, even if subsequent options

suit it better. So if the 28.8 Kbps option is first, a SMIL client with a dual-ISDN connection will choose it

because it is the first viable option listed.

Also make sure that the last option satisfies the lowest bit rate connection you want to support. If

option not suitable for 28.8 Kbps modems is listed, for example, clients connected through those modems

will not be able to play the presentation.

XV.Laying Out Multiple Clips

When a SMIL presentation displays several clips at a time, separate playback areas ("regions") can be

defined through the <layout> tag.

In the SMIL file header, the <region id> tag is used to name each area

and define its location within the main SMIL prsentation. In the SMIL file body, region attributes are used

to specify which media source files play in which areas.

Defining the Layout

Separate SMIL layout windows can be layed out using a a simple coordinate system measured across and

down (in pixels) from the top, left-hand corner.

Offset measurements are in pixels, with zero pixels as the

default.

<head>

</layout>

</head>

Cwu

Page

04/08/98

In this example, the <region> tags create two areas called "videoregion." and "textregion." Both areas are

offset from the left-hand edge of the main RealPlayer window by 103 pixels. The video region displays at

the top of the window, but the text region is 200 pixels down. (Because zero (0) pixels is the default, you

get the same result without the video region's "top" attribute.)

Note that the video region also specifies a

height and width in pixels. This constrains the video clip to those dimensions regardless of the clip's

encoded size. (Clipping occurs if the encoded video is larger than the region.) When no height and width

are given, as with the text region, the clip displays at its normal, encoded size.

XVI.

Adding a Background Color

You can specify background colors for each region in a SMIL layout:

<head>

</layout>

</head>

When a region clip is active, it overlays and hides the background color. The color shows through,

however, if the clip contains transparency. For the color value, you can use any Red/Green/Blue

hexadecimal value (#RRGGBB) supported by HTML, as well as one of the following predefined color

names, listed here with their corresponding hexadecimal values:

•

white (#FFFFFF)

•

silver (#C0C0C0)

•

gray (#808080)

•

black (#000000)

•

yellow (#FFFF00)

•

fuschia (#FF00FF)

•

red (#FF0000)

•

maroon (#800000)

•

lime (#00FF00)

•

olive (#808000)

•

green (#008000)

•

purple (#800080)

•

aqua (#00FFFF)

•

teal (#008080)

•

blue (#0000FF)

•

navy (#000080)

XVII. Overlapping Clips

If regions overlap, SMIL defines which regions appear in front with the z-index attribute. The following

example creates a region for a background image and an overlapping video:

<head>

</layout>

Cwu

Page

04/08/98

</head>

Here the background region is for a large image that fills the entire SMIL presentation. Its z-index of zero

means it always displays furthest to the back. The video, which overlaps the graphic, appears on top

because its region has a higher z-index value. Another element overlapping the video could be in a region

with a z-index of 2 (or 5, or 8, or 29) and thus appear in front of the video.

Here are pointers to observe when using the z-index:

•

The z-index values start at 0 (zero) and proceed through the positive integers without limit. ( No

negative value such as -4.)

•

The default value of 0 (zero) applies if you don't specify the z-index.

Using strictly sequential values such as 0, 1, 2, 3, 4 helps you keep track of the layers, but is not

necessary. A sequence such as 0, 1, 6, 19, 34 works just as well. And leaving gaps in the sequence makes

it easier to insert layers later.

•

Nonoverlapping clips can have the same z-index values. Side-by-side videos can both have a z-index

of 3, for example

•

When overlapping clips (say, clip A and clip B) have the same z-index, the following rules determine

which clip appears in front:

If clip B starts later in the presentation than clip A, it appears in front of clip A.

If both clips start at the same time, the clip listed later in the SMIL file appears in front.

XVIII. Assigning Clips to Regions

After you define the layout in the header section, you use region attributes within the source tags to attach

each source to a region:

<body>

<par>

</par>

</body>

In the example above, the video and image sources are assigned to the video and image regions defined in

the header. Audio files are not assigned to regions because audio streams do not have visual components

that require display areas.

XIX.

SMIL Layout Example

The following SMIL layout example displays three regions: a news region, a video region, and a stock

ticker region. The news and video regions are arranged side by side at the top of the main SMIL

presentation. The stock ticker region appears below them.

Dimensions:

Cwu

Page

04/08/98

Video: 176w x 144h

Text: 176w x 144h

Ticker Text: 352w x 30h

The SMIL file (.smi) to layout this broadcast news presentation is shown below:

<smil>

<head>

</layout>

</head>

<body>

<par>

<text

id="text1"

src="text.txt" region="textchannel1"/>

<text

id="text2"

src="ticker.txt" region="textchannel2"/>

</par>

</body>

</smil>

Univers
Ebooks
Livres audio
Presse
Podcasts
BD
Documents

Livre audio en ligne - Développement personnel Livre en ligne Tout le catalogue Tous les Intérêts

SMIL Language Tutorial

YouScribe

Le catalogue

Le service

Les conditions