Logo

SMIL
Didier Courtaud
21 décembre 1998

Logo orateur

Plan

SMIL ( Synchronized Multimedia Integration Language )

DESS Ingénierie Documentaire et Multimédia

 Module M4A

Didier COURTAUD

Remerciements

Ce cours s'est librement inspiré de :

Qu'ils soient ici remerciés de leur contribution respective

Introduction

Introduction : Suite

Introduction : Intégration avec le Web

Plusieurs choix possibles

Introduction : Objectifs d'un multimédia sur le Web

Introduction : SMIL

Introduction : Une présentation simple

Texte formaté, vidéo et audio

Introduction : Une présentation simple : Mise en place d'un lien local

le graphique apparaît durant le commentaire parlé

Introduction : Une présentation simple : Correspondant distant

La première vidéo se termine, la deuxième démarre

Introduction : Une présentation simple : Navigation au travers d'un lien

A tout moment pendant la vidéo, le spectateur doit pouvoir demander de l'information supplémentaire

 Introduction : En résumé

Que devons-nous spécifier ?

  1. Le contenu des objets multimédia
  2. La répartition spatiale des objets multimédia
  3. La répartition temporelle des objets multimédia
  4. Les liens ( navigation inter-objets )
  5. Les contenus alternatifs ( bande passante, langue, ... )
  6. Les annotations

Le contenu

Le contenu : Dimensions spatiale et temporelle des objets multimédia

texte:
objets 2D ;  séquence linéaire
rapport d'aspect indifférent
vidéo:
mise en page 2D + temps ; rapport d'aspect probablement important
audio:
dépendance temporelle uniquement
? : mise en page 0 ou 2D sans ou avec dépendance temporelle
graphiques :
mise en page 2D rapport d'aspect probablement important
     

Le contenu : Instance d'un objet multimédia

  1. Objet entier ou une partie de l'objet
  2. Extension, position et profondeur
  3. Durée
  4. Cible des liens
  5. Annotations
    • croissance du Web
Nous reviendrons sur ces points un peu plus tard

Le contenu : Les éléments des objets multimédia

Eléments ref, text, textstream, img, audio, video et animation

    <ref src="anything.???" ... />
     <text src="file.html" ... />
     <textstream src="stockticker.rtx " ... />
     <img src="graph.jpg" ... />
     <audio src="http://www.w3c.org/SYMM/joe.wav" .../>
     <video src="rtsp://www.w3c.org/SYMM/vid.rm" .../>
     <animation src="cute.anim" .../>
 

L'attribut src est un URI qui localise l'objet.

Le player ne déduit pas le type exact de l'objet du nom de l'élément de l'objet multimédia. Il utilise par exemple l'attribut type, ou l'information de type communiquée par le serveur ou par l'operating system. Les noms servent uniquement à la lisibilité.
 
 

Le contenu : Spécification d'une partie d'un objet

Le contenu : Echantillons en temps

Le temps et l'espace sont traités indépendamment

Attributs clip-begin et clip-end

    <video src="mpeg/zoomin.mpg"
            clip-begin="smpte=00:01:19:20"
            clip-end="smpte=00:01:38:40" .../>

La syntaxe est la suivante .....
 
 

Le contenu : Syntaxe de clip begin/end

Clip-time-value    ::= Metric "=" ( Clock-val | Smpte-val )
Metric             ::= Smpte-type | "npt"
Smpte-type         ::= "smpte" | "smpte-30-drop" | "smpte-25-drop"
Smpte-val          ::= "Hours":"Minutes":"Secondes"[:"Frames"[:"Subframes]]
Hours              ::= 2DIGIT
Minutes            ::= 2DIGIT
Secondes           ::= 2DIGIT
Frames             ::= 2DIGIT
Subframes          ::= 2DIGIT

Metric a 3 options SMPTE : smpte , smpte-30-drop , smpte-25-drop
autrement il prend la valeur npt (Normal Play Time) qui utilise une valeur d'horloge.

Exemples de valeur de clip-begin :
Marque SMPTE : smpte=10:12:33:20
NPT                    : npt=12:05:35:3

Une valeur d'horloge s'écrit ......
 
 

Le contenu : Syntaxe d'une valeur d'horloge

Clock-val          ::= Full-clock-val | Partial-clock-val | Timecount val
Full-clock-val     ::= "Hours":"Minutes":"Secondes"("."Fraction)?
Partial-clock-val  ::= "Minutes":"Secondes"("."Fraction)?
Timecount-val      ::= Timecount("."Fraction)?("h"|"min"|"s"|"ms")?
                        defaut : "s"
Hours              ::= 2DIGIT; n'importe quel nombre positif
Minutes            ::= 2DIGIT; entre 00 et 59
Secondes           ::= 2DIGIT; entre 00 et 59
Fraction           ::= DIGIT+
Timecount          ::= DIGIT+
2DIGIT             ::= DIGIT DIGIT
DIGIT              ::= [0-9]

Exemples de valeurs d'horloge valides :

Full clock value :         02:30:03    2 heures, 30 minutes et 3 secondes
Partial clock value :     02:33         2 minutes et 33 secondes
Timecount values :        3h , 45min, 30s, 5ms
 
 

Disposition spatiale

Disposition spatiale : Façons possibles de spécifier la mise en page

Disposition spatiale : Les Régions

Chaque instance d'objet contient une référence à une région

L'élément region est défini par :

          <region id="V-main" top="5%" left="50%" height="100%" width="100%" z-index="3" />
   <region id="V-remote" top="10" left="100" height="200" width="200" z-index="2" />

Disposition spatiale : Profondeur

La profondeur ( Z-index ) détermine l'ordre d'empilement des objets ( l'indice le plus élevé sur le dessus ).

Si deux éléments A et B ont la même profondeur alors :

Disposition spatiale : Pourquoi une hauteur et une largeur ?

Disposition spatiale : Contraintes sur la mise en page

Disposition spatiale : La mise en page

<layout>

    <root-layout width="721" height="587" id="matise" />
    <region id="T_title" left="2%" top="5%" width="40%"
        height="24%" z-index=2 />
    <region id="V_remote" left="3%" top="44%" width="54%"
        height="40%" z-index=3 />
    ......

</layout>
 
 

Disposition spatiale : Mise en page de base

L'élément root-layout définit une zone rectangulaire. Toutes les autres régions sont définies par rapport à cette zone. Il n'y a pas de mise en page entremêlée ou relative.

La mise en page root-layout est le point de vue , ou la fenêtre, à partir de laquelle la présentation sera rendue visuellement.

Un document SMIL peut avoir au plus une mise en page root-layout .

Si un objet multimédia n'a pas d'attribut région explicite, alors une mise en page par défaut est attribuée par le logiciel de visualisation.

Pour obtenir la mise en page par défaut pour tous les éléments multimédia, une mise en page de base vide peut être déclarée de la façon suivante :

<layout> type="text/smil-basic-layout" </layout>

Si aucune mise en page root-layout n'est spécifiée alors la taille de la fenêtre est calculée par le logiciel de visualisation de façon à ce qu'elle soit aussi large que l'objet multimédia le plus large.
 
 

Disposition spatiale : Découpes en espace

Disposition spatiale : Relations entre la mise en page SMIL et CSS2

La mise en page de base de SMIL est consistante avec le module visuel de rendu de CSS2. Il introduit en plus l'attribut fit. Par ailleurs, c'est un sous-ensemble.

La mise en page de base de SMIL ne s'applique qu'aux éléments des objets multimédia.

Les éléments des objets multimédia font référence à une région.
Les éléments région de CSS2 font référence aux éléments des objets multimédia
 
 

Disposition temporelle

Disposition temporelle : Quel temps ?

Types de temps

Disposition temporelle : Durée d'un objet multimédia

intrins$egrave;que

Explicite

Disposition temporelle : Durée d'un objet multimédia ( suite )

La durée d'un objet peut être étendue par répétition du contenu.

Attribut repeat

    <video src="zoomin.mpv" region="V-main" repeat="3" />

l'objet s'arrête après 15,9 secondes

         <video src="zoomin.mpv" region="V-main" repeat="3" dur="11s" />

l'objet s'arrête après 11 secondes

            <video src="zoomin.mpv" region="V-main" repeat="indefinite" />

  l'objet s'arrête quand son parent s'arrête

La valeur de l'attribut repeat est un entier ou indefinite .
 
 

Disposition temporelle : Temps de début des éléments - par

L'élément par groupe les éléments qui sont joués en parallèle

Disposition temporelle : Temps de début des éléments - seq

L'élément seq groupe les éléments qui sont joués en séquence

Disposition temporelle : Imbrication des éléments par et seq

<seq>

    <par>
        <text src="leader_title.html" region="m_title" dur="5s" />
        <video src="cnn.mpv" region="V-main" />
        <audio src="cnn.aiff" region="music" />
    </par>

    <par>
        <text src="story_title.html" region="m_title" dur="2s" />
        <video src="anchor.mpv" region="V-main" />
        <audio src="anchor.aiff" region="music" />
    </par>

</seq>
 
 


Disposition temporelle : Temps de début explicite dans un élément par

Attribut begin : valeur de retard

<par>
        <text src="leader_title.html" region="m_title" dur="5s" />
        <video src="cnn.mpv" region="V-main" begin="1.4s" />
        <audio src="cnn.aiff" region="music" />
</par>

  Disposition temporelle : Temps de début explicite dans un élément seq

Attribut begin : valeur de retard

<seq>
    <video src="logo.mpv" region="V-main" />
    <video src="anchor.mpv" region="V-main" begin="1.4s" />
</seq>
 


 

Disposition temporelle : Temps de début relatif à un autre élément

Attribut begin : valeur d'événement

 <par>
        <text src="leader_title.html" region="m_title" dur="5s" />
        <video id="v1" src="cnn.mpv" region="V-main" begin="1.4s" />
        <audio src="cnn.aiff" region="music" begin="id(v1)(0.5s)" />

</par>
 

 Disposition temporelle : Temps de fin d'un élément multimédia

Un élément multimédia possédant une durée implicite ou explicite et un temps de début a un temps de fin = temps de début + durée

<video src="cnn.mpv" region="V-main" begin="4s" />


 

Attribut end : même syntaxe que l'attribut begin

Un élément multimédia possédant un temps de début explicite et un temps de fin explicite a une durée = temps de fin - temps de début

<text src="title.html" region="m_title" begin="4s" end="8s" />

Disposition temporelle : Temps de fin d'un élément multimédia ( II )

Un élément multimédia possédant un temps de début explicite, une durée et un temps de fin explicite, a un temps de fin égal au minimum entre le temps de fin explicite et la somme temps de début + durée

<seq>
    <text scr="title.html" region="m_title" begin="4s" dur="4s" end="10s" />
    <text scr="title.html" region="m_title" begin="14s" dur="6s" end="18s" />
</seq>

Disposition temporelle : Temps de fin d'un élément multimédia ( III )

Un élément multimédia peut aussi avoir une durée intrinsèque

<video src="cnn.mpv" region="V-main" begin="3s" dur="14s" end="12s" />

Disposition temporelle : Temps de fin d'un élément multimédia ( IV )

Disposition temporelle : Temps de fin d'un élément seq

Un élément seq se termine quand son dernier fils se termine .

Si son dernier fils a une fin indéterminée alors l'élément seq a une fin indéterminée

<seq>
    <video src="logo.mpv" region="V-main" />
    <video src="anchor.mpv" region="V-main" />
    <text src="title.html" region="m_title" dur="indefinite" />
</seq>

Disposition temporelle : Temps de fin d'un élément par - first

Attribut endsync

<par endsync="first">

    <text src="leader_title.html" region="m_title" dur="5s" />
        <video id="v1" src="cnn.mpv" region="V-main" begin="1.4s" />
        <audio src="cnn.aiff" region="music" begin="id(v1)(0.5s)" />
 

</par>
 

Disposition temporelle : Temps de fin d'un élément par - id-ref

Attribut endsync

<par endsync="id(v1)">

    <text src="leader_title.html" region="m_title" dur="5s" />
        <video id="v1" src="cnn.mpv" region="V-main" begin="1.4s" />
        <audio src="cnn.aiff" region="music" begin="id(v1)(0.5s)" />

</par>
 


 

Disposition temporelle : Temps de fin d'un élément par -last

Attribut endsync

<par endsync="last">

    <text src="leader_title.html" region="m_title" dur="5s" />
        <video id="v1" src="cnn.mpv" region="V-main" begin="1.4s" />
        <audio src="cnn.aiff" region="music" begin="id(v1)(0.5s)" />

</par>
 
 


Disposition temporelle : Types de synchronisation

Synchronisation matérielle

Synchronisation logicielle

Contenu alternatif

Contenu alternatif : Spécification

Pourquoi des contenus alternatifs ?

Elément switch

Contenu alternatif : Attributs de test

Elément switch : attributs de test

Contenu alternatif : Attributs de test multiples

Choix sur la bande passante et la langue

<switch>

    <audio system-bitrate="44000 system-language="fr" src="fr-hi-res.aiff" />
    <audio system-bitrate="44000 system-language="en" src="eng-hi-res.aiff" />

    <audio system-bitrate="16000 system-language="fr" src="fr-low-res.aiff" />
    <audio system-bitrate="16000 system-language="en" src="eng-low-res.aiff" />

</switch>
 

Les éléments par, seq et les objets multimédia peuvent aussi avoir des attributs de test

<textstream system-captions="on" src="txtstream.rtx" />
 

Les liens

Les liens : Lien d'un élément à une présentation

Elément <a> : similaire à l'élément <a> de HTML

Les liens : Lien d'un élément à un autre élément

Lien vers des fragments SMIL

Les liens : Lien d'un élément vers une sous-partie d'un objet multimédia

Elément anchor

L'élément anchor autorise la spécification de sous-parties spatiales ou temporelles d'un élément multimédia

Gestion des liens dans des documents inclus

On a besoin de href s'il s'agit d'une source et de id s'il s'agit d'une destination

SMIL document 1 ( HTML dans SMIL, ancre et lien définis en SMIL )

<text src="archives-dcab.html" region="I-main" >
 

      <anchor href="time-time.smil#gable-3 show="new"
      <coords="40%, 70%, 55%, 100%" />

</text>

SMIL document "time_time.smil" ( image en SMIL )

<img src="XVII" region="house-right" >

    <anchor id"gable-3 coords="40%, 70%, 55%, 100%"/>

</img>

L'élément meta définit les propriétés d'un document

Attributs des éléments par,seq et des objets multimédia

abstract, author, copyright, title sont recommandés

Attributs spécifiques des objets multimédia

Attributs des éléments region

title : recommandé

Annotations sémantiques : Structure de haut niveau d'un document

Partitionnement en sections

<smil>

    <head>

        <meta>
            ....Informations générales sur le document
        </meta>

        <layout>
            .... Définition de mise en page
        </layout>

    </head>

    <body>
            .... Objets et relations temporelles
            .... Liens et objets ancres
    </body>

</smil>
 
 

Annotations sémantiques : Compatibilité ascendante

L'attribut skip-content autorisera les documents écrits dans une version ultérieure de SMIL à être joués par des players de version antérieure

 

Si l'attribut skip-content est positionné à vrai ( valeur par défaut ) alors le contenu de l'élément est ignoré dans les players SMIL 1.0

 

Résumé

SMIL : Un exemple complet de description d'un objet multimédia

<video id="vid1" region="R_video"
    src="rtsp://www.w3.org:Coolstuff.rm"
    clip-begin="smpte=00:01:19:20"
    clip-end="smpte=00:01:38:40"
    begin="3s"
    dur="22s"
    end="21s"
    alt="Video of Joe chatting to Tim"
    longdesc="Joe and Tim are in a meeting room. Joe is on
       the left ans Tim is on the right"
    title="Joe greets Tim"
    system-bitrate="28800">
    <anchor id="joe" begin="0s" end="5s" coords="0%, 0%,50%, 50%" href="http://www.w3.org/" />
    <anchor id="tim" begin="5s" end="10s" coords="50%, 50%,50%, 50%" href="http://www.w3.org/Tim" />
</video>
 

SMIL et XML

W3C:

"SMIL est le premier langage qui rend accessible au monde du multimédia synchronisé les bénéfices de l'architecture du Web. Il contient tous les composants avec lesquels les utilisateurs du Web sont familiers, comme les URLs, les mise en page à base de CSS, les liens HTML et une syntaxe de type XML. En tant qu'application la plus avancée, SMIL est la première recommandation du W3C qui recommande l'usage des espaces de nommage XML pour intégrer de nouveaux composants dans le langage SMIL, et pour ajouter des composants SMIL à d'autres applications XML qui ont besoin de fonctionnalités de synchronisation"
 
 

Le support de SMIL

Conclusion

SMIL 1.0 est minimal !

La version 2.0 est en cours de spécification

Pointeurs utiles :