- Tous les cours
- Conditions d'utilisation
- À propos de ces cours
- Contact

# Cours de XML - Synchroniser des contenus multimédia avec SMIL

version 1.31, dernière mise à jour le 23 mai 2006.

Chercher dans le cours :

## Table des matières (TdM)

1. I. Généralités
   1. Introduction
   2. Moyens logiciels
   3. Structure d'un document SMIL

1. II. Construction progressive d'un fichier SMIL
   1. Structure
   2. Positionnement
      1. Introduction
      2. Élément de base
      3. Définition des régions
      4. z-index
      5. Ajustement de la taille de l'objet
      6. Types d'objets multimédia
   3. Synchronisation
      1. Gestion des paramètres temporels d'affichage
      2. Séquence
      3. Affichage en parallèle
   4. Exercice : Un premier fichier SMIL

1. III. Conclusion
   1. D'autres effets possibles...
   2. Pour en savoir plus...

Retour au menu

## Contenu du cours

### I. Généralités

#### 1. Introduction

Il existe divers moyens d'apporter du contenu dynamique, alliant son, texte et animations sur un site web, `Flash` par exemple. De son côté, dans le cadre d'études sur la généralisation du format `XML`, le W3C a mis sur pied des groupes de travail chargés de définir un format de données, fondé sur `XML`, permettant de créer des animations multimédia sur Internet. Ces groupes de travail ont donc défini `SMIL` (Synchronized Multimedia Integration Language). Ce langage permet de synchroniser divers éléments multimédia, tels que de la vidéo, du son et du texte. Ceci permet de créer des présentations multimédia interactives très complexes.

Le `SMIL` est une application `XML` et se sert donc de tout ce qu'offre ce dernier. Dans cette application, le `XML` indique le comportement dans le temps des divers objets multimédia, et leur interactivité via des liens hypertextes ou autres.

>Retour à la TdM

#### 2. Moyens logiciels

Il est probable que vous ayiez déjà utilisé ce format de données sans le savoir ; en effet, il commence à se répandre. Il existe des applets `Java` permettant de visualiser une présentation dans un navigateur, telles que le Soja Player de HELIO et HPAS (Hypermedia Presentation and Authoring System) chez Digital.

On retrouve de même la possibilité de lire ces nouveaux standards à l'aide du `Windows Media Player` à partir de la version 7.0, `Apple Quick Time` à partir de la version 5.0 ou encore `Real Player` à partir de la version 8.0.

La société Oratrix propose une famille de produits multimédia (dont le nom est GriNS Authoring Software) permettant de créer des présentations multimédia en flux tendu pouvant être lues grâce au `Real Player G2`. Cette famille de logiciels permet de la même manière de créer des présentations en format `SMIL` "pur" contenant aussi bien du `HTML` interactif que des animations très complexes.

>Retour à la TdM

#### 3. Structure d'un document SMIL

Un document `SMIL` est structuré en trois parties :

- définition des régions qui recevront les différents objets multimédias (position, style) ;

- définition de l'ordre et de l'échelle temporelle à appliquer aux objets. Cette étape permet en plus de définir les mouvements, les transitions, etc. ;

- définition du débit en fonction du type de connexion.

>Retour à la TdM

### II. Construction progressive d'un fichier SMIL

#### 1. Structure

La structure d'un document `SMIL` ressemble beaucoup à celle d'un document `HTML`. L'élément racine est `<smil>`, et il comporte un élément `<head>` et un élément `<body>` :

<smil>
<head>(...)</head>
<body>(...)</body>
</smil>

On peut ajouter dans l'élément `<head>` des balises `<meta>`, comme par exemple `<meta name="copyright" content="(...)" />`.

Il est également possible d'incorporer dans le prologue du fichier, avant l'élément racine, la déclaration de version XML, ainsi qu'une déclaration de dépendance envers la `DTD` du W3C :

<!DOCTYPE smil PUBLIC "-//W3C//DTD SMIL 1.0//EN" "http://www.w3.org/TR/REC-smil/SMIL10.dtd">

La dernière version de la spécification du W3C est la 2.1. Par rapport à la 2.0,qui n'apportait que de petites modifications sur certains éléments, elle ajoute le concept de modularité et l'ajout de nouvelles fonctionnalités plus particulièrement destinées aux mobiles.

Ce cours d'initiation se limite à la version 1.0.

>Retour à la TdM

#### 2. Positionnement

##### a. Introduction

Dans le header, doit également être défini l'élément `<layout>`, dont la fonction est de spécifier la zone dans laquelle les animations doivent être affichées, ainsi que les diverses régions où elles doivent prendre place.

>Retour à la TdM

##### b. Élément de base

La fenêtre destinée à accueillir l'ensemble des animations est définie par l'élément vide `<root-layout/>` :

<root-layout width="300" height="200" background-color="blue" title="Animations" />

Cet élément permet de définir par ses attributs `width` et `height` la taille de la fenêtre de base, mais également sa couleur de fond, son titre, etc. A l'intérieur de cette fenêtre, tout comme à l'intérieur d'une fenêtre de navigateur, le positionnement d'un objet se fait par rapport au coin supérieur gauche.

>Retour à la TdM

##### c. Définition des régions

Chaque objet multimédia devra être associé, dans ce cadre général, à uné région qu'il faut donc définir. Cela se fait par l'intermédiaire de l'élément vide `<region/>` :

<region id="region1" left="75" top="50" width="32" height="32" />

Pour placer ensuite l'image "test.gif", de taille 32x32, dans cette région, il suffit alors de l'insérer dans le `body`, en spécifiant son affectation à la région. Cela donne au final :

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE smil PUBLIC "-//W3C//DTD SMIL 1.0//EN" "http://www.w3.org/TR/REC-smil/SMIL10.dtd">
<smil>
<head>
<meta name="copyright" content="Jean Dupont" />
<root-layout width="300" height="200" background-color="blue" title="Animations" />
<region id="region1" left="75" top="50" width="32" height="32" />
</head>
<body>
<img src="test.gif" alt="image de test" region="region1" />
</body>
</smil>

Il est possible également de définir le positionnement de la région, non en absolu par rapport à la fenêtre principale comme dans l'exemple précédent, mais en relatif, en utilisant les attributs `left="40%"` et `height="30%"`, par exemple, qui positionnent le coin supérieur gauche de la région à 40% de la taille totale de la fenêtre principale par rapport à son bord gauche, et à 30% par rapport à son bord supérieur.

>Retour à la TdM

##### d. z-index

De même qu'en `DHTML`, il est possible de positionner une région en avant- ou arrière-plan d'une autre, via l'attribut `z-index`. Plus la valeur de cet attribut est élevée, plus la région est à l'avant-plan. Par exemple

<region id="region1" left="75" top="50" width="32" height="32" z-index="1" />
<region id="region2" left="100" top="175" width="80" height="80" z-index="2" />

Ces deux régions se superposent, mais la région `region2` est à l'avant-plan : un objet placé dans cette région apparaîtra devant tout objet de la première.

>Retour à la TdM

##### e. Ajustement de la taille de l'objet

L'attribut `fit` de l'élément `region` permet de définir la manière dont un objet doit la remplir :

- `fit="fill"` demande à l'objet de remplir toute la fenêtre ; cela peut entraîner des déformations d'une image, par exemple ;

- `fit="meet"` demande à l'objet de s'agrandir éventuellement jusqu'à ce que sa plus grande dimension entre en contact avec les bords de la région ;

- `fit="slice"` est le complémentaire de la valeur précédente, puisque cette fois-ci c'est sa plus petite dimension qui est étirée pour entrer en contact avec les bors de la région ;

- `fit="scroll"` permet à un objet plus grand que la fenêtre d'y être affiché avec des barres de défilement.

>Retour à la TdM

##### f. Types d'objets multimédia

On a vu un exemple d'utilisation d'une image avec l'élément `img`. Il est également possible d'utiliser d'autres types d'objets multimédia :

- les formats d'images acceptés sont `gif` et `jpeg` ;

- des fichiers audio : `wav`, `MP3`, mais aussi des formats plus particuliers comme le format de données audio de Sun. C'est la balise `audio` ;

- des fichiers de texte : texte brut avec la balise `text`, ou bien texte en streaming avec la balise `textstream` pour les lecteurs Real ;

- des fichiers vidéo (`Real movie`, `avi`, `mpeg`, `mov`) avec la balise `video`.

>Retour à la TdM

#### 3. Synchronisation

##### a. Gestion des paramètres temporels d'affichage

On utilise pour cela les attributs `begin` et `dur` (pour duration) :

<img src="test.gif" alt="image de test" region="region1" begin="1s" dur="3s" />

Dans cet exemple, l'affichage de l'image débute une seconde après la définition de la région `region1`, puis l'image disparaît après trois secondes.

>Retour à la TdM

##### b. Séquence

Il est possible de créer une séquence d'événements, en se servant de la balise `seq` et des attributs `begin` et `dur`. Ainsi...

<seq>
<img src="test.gif" alt="image de test" region="region1" dur="3s" />
<img src="test2.gif" alt="image de test" region="region1" dur="3s" begin="1s" dur="7s" />
</seq>

... va afficher dans la région1 tout d'abord test.gif pendant trois secondes, puis la faire disparaître. Une seconde plus tard, `test2.gif` est affichée, et ce pendant sept secondes. Les séquences vidéo et audio ont un "timer" interne ; la gestion de leur affichage se fait grâce à d'autres attributs (`clip-begin`, `clip-end`...), qui permettent de positionner la lecture en différents endroits de la piste. En l'absence de ces attributs, les films et extraits musicaux sont joués dans leur intégralité.

>Retour à la TdM

##### c. Affichage en parallèle

Il est également possible de faire jouer des objets en parallèle, avec l'élément `par`.

>Retour à la TdM

#### Exercice 1. Un premier fichier SMIL

Télécharger la correction et l'ouvrir localement, avec tous les fichiers multimédias donnés dans l'énoncé.

##### Énoncé

##### Correction

### III. Conclusion

#### 1. D'autres effets possibles...

La spécification 2.0 du W3C a ajouté également d'autres fonctionnalités, comme des effets de transition ; mais dès le début, `SMIL` a permis de mettre en place l'affichage de liens http, de l'interactivité via des réactions à la souris... Bref, il est possible de mettre sur pied des présentations multimédia interactives, avec l'avantage que le fichier source est un simple fichier ASCII. Bien sûr, des environnements intégrés de développement existent également, pour les réfractaires au `Bloc Notes`...

>Retour à la TdM

#### 2. Pour en savoir plus...

De nombreux didacticiels existent sur Internet. Je vous recommande, si ce format vous intéresse, d'y passer quelque temps. Des exemples y sont donnés.

- Le site du W3C, bien entendu...

- Real Networks offre bien sûr un très bon site de présentation générale :http://service.real.com/help/library/guides/production/htmfiles/smil.htm. D'autres ressources figurent également sur ce site

- L'Université de Boston présente un très bon tutoriel à http://www.bu.edu/webcentral/learning/smil1/.

- Des didacticiels réalisés en `SMIL` et faisant appel à l'applet SOJA sont disponibles sur http://www.empirenet.com/~joseram/

- Un autre bon didacticiel a été réalisé par la société HELIO à http://www.helio.org/products/smil/tutorial/

- Just Smil est une mine de renseignements sur http://smw.internet.com/smil/smilhome.html

>Retour à la TdM

## Historique de ce document

- Le 23 mai 2006, version 1.31. Ajout de la référence à SMIL 2.1.
- Le 13 juillet 2005, version 1.30. Réécriture des exemples.
- Le 28 juin 2004, version 1.21. Ajout d'une remarque sur la correction d'un exercice.
- Le 20 avril 2004, version 1.20. Ajout d'un exercice.
- Le 31 juillet 2003, version 1.10. Corrections typographiques et quelques mises à jour sur le fond.
- Le 30 mai 2002, version 1.00. Création du cours

## Bibliographie

### De l'auteur (G. Chagnon)

- XML, publié par Pearson Education en septembre 2007. Livre de cours et exercices écrit en collaboration avec Florent Nolot (Université de Reims). Consulter la fiche sur Eyrolles. Consulter la fiche sur Amazon.

## Conditions d'utilisation et licence

Cette création est mise à disposition par Gilles Chagnon sous un contrat Creative Commons.

Retour au menu