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

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

   

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 :

>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.

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.

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.

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.

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 :

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 :

>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.

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é.

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.

>Retour à la TdM

Historique de ce document

Bibliographie

De l'auteur (G. Chagnon)

Conditions d'utilisation et licence

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

Retour au menu