M2 SIMI - Diffusion d'information multimedia - SMIL

Auteur(s):
Sébastien CHOPLIN
dans ce qui suit, les URL suivantes sont équivalentes:

Liens utiles:

Cours SMIL: Players SMIL: Ressources SMIL: Editeurs SMIL: Rappel de structure d'un document SMIL 2.0: 
<?xml version="1.0"?>
<!DOCTYPE smil
 PUBLIC "-//W3C//DTD SMIL 2.0//EN" "http://www.w3.org/2001/SMIL20/SMIL20.dtd">

<smil xmlns="http://www.w3.org/2001/SMIL20/Language">

<head>
  <meta name="title" content="Photos"/>
  <layout>
      <root-layout width="XX" height="YY"/>
      <region id="region1" top="X1" left="Y1" height="H1" width="W1"/>
      <region id="region2" top="X2" left="Y2" height="H2" width="W2"/>
      ...
  </layout>
</head>

<body>
   <par> <!-- execution parallele -->
     <video src="video.mpg" region="region1" /> <!-- video dans region1 -->
     <img src="image.jpg" region="region2" />
     <textstream src="text.rt" region="region3" />
     ...
   <par>

   <seq> <!-- execution sequentielle -->
     ...
   </seq>

   ...
</body>

</smil>

Exercice 1: Mon premier SMIL

  1. Créez un document SMIL affichant juste l'image chien.jpg
  2. Ajoutez une zone de texte contenant "Le petit chien" sous la zone affichant l'image.
  3. Ajoutez un aboiement avec le son dobark.wav au démarrage
  4. Répétez l'aboiement 3 fois et changer le texte par "C'est fini" après les aboiements

Exercice 2: Synchronisation

fortement inspiré de http://gilles.chagnon.free.fr/cours/xml/exercices/exo14.html.

  1. Créez un fichier SMIL, faisant appel à la DTD de la version 2.0 sur le site du W3C. Il comportera uniquement un entête et un corps de document.
  2. Dans l'entête:
    1. déclarez une zone d'affichage totale de 288 pixels de large, sur 384 de haut, et une couleur de fond bleue.
    2. déclarez une région d'identifiant reg1, à 10 pixels du haut de la fenêtre et 20 pixels de son bord gauche, une largeur de 200 et une hauteur de 111 pixels;
    3. déclarez une région d'identifiant reg2, à 150 pixels du haut de la fenêtre et 130 pixels de son bord gauche, une largeur de 170 et une hauteur de 20 pixels;
    4. déclarez une région d'identifiant reg3, dans le coin supérieur gauche de la fenêtre, une largeur de 384 et une hauteur de 288 pixels;
    5. déclarez une région d'identifiant reg4, à 250 pixels du haut de la fenêtre et 50% de son bord gauche, une largeur de 70 et une hauteur de 20 pixels.
  3. Dans le corps:
    1. L'ensemble des objets cherchés est inclus dans une séquence;
    2. Cette séquence commence par une image et un texte affichés en parallèle pendant trois secondes:
      • L'image est dauphin1.jpg, et doit être affichée dans la région reg1;
      • Le texte est celui du fichier essai.txt, de type plain text, et est affiché dans la région reg2.
    3. Elle continue par l'affichage en parallèle d'une séquence video, d'un bruit de fond et d'un son et d'un texte quand le dauphin entre dans l'eau:
      • la séquence vidéo du fichier dolphin.rm, est affichée dans la région reg3;
      • Le bruit de fond est celui du fichier mer-calme.mp3;
      • Le texte est celui du fichier dauphin.txt, de type plain text, et affiché dans la région reg4.
      • Le son à entendre quand le dauphin entre dans l'eau est wateresplash.wav.
    4. La séquence se termine par l'affichage du texte du fichier fin.txt, de type plain text, dans la région reg3, pendant 10 secondes.
  4. Ajoutez une zone permettant la navigation dans le temps comportant des boutons permettant d'accéder directement aux moments suivants: Vous pouvez vous inspirer de la méthode utilisée pour les exposés scientifiques multimédia de l'INRIA.

Exercice 3: Editeurs

  1. Essayez les éditeurs gratuits SMIL: Manalee et Limsee 2