Chapitre 1 SMIL

SMIL
Synchronized Multimedia Integration

Language
ISETCH 2017
1
Plan
• Introduction au langage SMIL
• Structure générale d'un document multimedia SMIL
• Dimension spatiale
• Dimension contenu
• Dimension temporelle
• Dimension hypermédia
• Autres fonctionnalités
• Les animations
• Adaptation au contexte
• Spécification de meta-données
• Les outils développés autour de SMIL
SMIL 2
Rappel
SMIL 3
Le XML
Le XML pour eXtensible Markup Language est un

langage de balises comme le Html mais il est
extensible et évolutif.
En XML, les balises ne sont pas prédéfinies. C'est
vous qui devez ou pouvez définir vos propres balises.
Un document XML est :
• Composé d'unités de stockage appelées entités.
• Ces données sont soit des données simples soit des
données concourant au marquage (balisage).
• Le balisage permet de décrire la structure logique
du document.
SMIL 4
EXEMPLE XML
<?xml version="1.0" encoding="iso-8859-1"?>

<carnetDeContact>
<contact>
<adresse>
<lignesAdresse>
<ligne>iset charguia</ligne>
<ligne>17 rue des entrepreneurs</ligne>
</lignesAdresse>
<codePostal>36000</codePostal>
<ville>ARIANA</ville>
</adresse>
SMIL 5
EXEMPLE XML
<url>http://www.isetch.cck.tn</url>
<logo src="http://www.istch.cck.tn/logo.jpg" />
<tel t="fixe">71940322</tel>
</contact>
<contact>...</contact>
</carnetDeContact>
SMIL 6
L’ARBRE XML
SMIL 7
SMIL : Synchronized Multimedia Integration
Language
SMIL 8
SMIL
• Pourquoi utiliser le langage SMIL ?
D'autres langages de spécification de documents multimedia :
• Flash
• Javascript
• ...
• SMIL est une recommandation du W3C (un \standard")
• format ouvert défini par RealNetworks, Macromedia, Intel, IBM, Microsoft,
• Panasonic, Sony, Nokia, Philips, INRIA, CWI. . .
• DTD XML => Interopérabilité
• Utilisation de toutes les technologies XML (XQuery, XPath, XSLT. . .)
• Beaucoup de projets Open Source autour des standards (Editeurs, Players. . .)
• Un langage en évolution constante.
SMIL 9
HISTORIQUE DE SMIL
• 1996 : W3C Workshop
• 1997 : Première réunion du groupe de travail SYMM
• 1998 : La recommandation SMIL 1.0 est née
• Synchronisation et placement visuel d'objets multimédia
• Interactivité
• Capacité d'adaptation a differents contextes
• 2001 : SMIL 2.0

• Animation
• Meta-donnees
• 2005 : SMIL 2.1

• Effets de transitions
• Exécution multi plates-formes (SMIL profiles)
• 2008 : SMIL 3.0

• Outils supplémentaires de structure et de contrôle de la présentation
SMIL 10
Comment visualiser du SMIL
 Realplayer 8
 http://www.real.com/realone/plus/index.html?lang=en&l
oc=us
SMIL 11
SMIL un dialecte XML
<?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>
Spécification de l’affichage, des méta données et des transitions
</head>
<body>
Synchronisation des objets multimedias,
Spécification des informations hypermedia ...
</body>
</smil>
SMIL 12
SMIL : META
<meta name= "nom" content= "contenu"/>
Name =
Author
Date
Publisher
Right…..
SMIL 13
Spécification des zones d’affichage
SMIL 14
Spécification des zones d’affichage
 Élément <layout> contient

 une description de la fenêtre principale (élément <root-layout>)
 pour chacune des régions de la présentation, sa position, sa taille et une
identification unique (élément <region>)
SMIL 15
Élément <root-layout>
 Description de la fenêtre principale

 ses dimensions (en pixels)
 la couleur de fond
 Exemple
<root-layout width="300" height="200" background-
color="white" />
SMIL 16
Élément <region>
 Description d’une région
 son identification : attribut id
 sa position : attributs left et top
 ses dimensions : attributs width et height
 Exemple
<region id="vim_icon" left="75" top="50"
width="32" height="32" />
 Chaque média visuel doit avoir une région associée
SMIL 17
Positionnement d’une région
 Position absolue (en nombre de pixels)

 left="75" top="50"
 Position relative (en % de la taille de la fenêtre principale)
 left="50%" top="40%"
SMIL 18
Exemple
<head>
<layout>
<root-layout background-color="#ffffcc" height="460" width="710"/>
<region height="440" id="RVideo" left="10" top="10" width="440"/>
<region height="230" id="RTitre" left="450" top="10" width="260"/>
<region height="230" id="RRecette" left="450" top="240" width="260">
<region id="Ingdt1" left="30" top="100" width="200" height="50"/>
</region>
</layout>
</head>
SMIL 19
Exercice : Spécifier cette organisation
spatiale en SMIL
SMIL 20
Recouvrement de deux
régions
 Deux régions peuvent se recouvrir
 L’attribut z-index donne le niveau
 La région dont le z-index est le plus grand est au dessus
 z-index positionne une région en avant ou en arrière
 Exemple
<region id="bullet6" title="marque6" left="10" top="540" width="14"
height="14"
z-index="4" />
SMIL 21
Ajuster un média à sa région
• Attribut fit
• fit="fill" s’étendre dans la sous fenêtre
• fit="meet" s’étendre sans déformation en
remplissant une seule dimension
• fit="slice" s’étendre sans déformation en
remplissant tout l’espace
• fit="scroll" mettre un (des) ascenseur(s)
• Exemple
<region id="vim_icon" left="75" top="50"
width="32" height="32" fit="scroll" />
-SMIL 22
Le corps d’un document SMIL : <body>
SMIL 23
 Positionnement d’un média
<img region="r2" begin="4s" src="img.gif" />
média où quand quoi

Audio :
<audio id="..." src="..." begin="..." dur="..." end="..." />
Video :
<video id="..." src="..." begin="..." dur="..." />
Texte :
<text id="..." src="..." region="..." />
Ou bien
La balise textstream pour les lecteurs Real
Image :
SMIL 24
<img id="..." src="..." region="..." fit="fill" />
Type de média acceptés par
RealPlayer
Type de média élément

Image gif, jpeg <img>
Microsoft wav, mp3, <audio>
Sun Audio,
Sun Audio Zipped
Texte simple <text>
Real movie, AVI, <video>
MPEG, MOV
SMIL 25
 Spécification de la timeline de la présentation
Certains éléments sont joues en « parallele ».

Certains éléments sont joues en « sequence ».
SMIL 26
Conteneurs temporels SMIL : PAR et SEQ
 Spécification de la timeline de la movie1.rm
présentation
4s img.gif
audio1 5s audio2
L’espace <body>
<par>
<video region="r1" src="movie1.rm" />
<img region="r2" begin="4s" src="img.gif" />
<seq>
Le temps <audio src="audio1.wav" />
<audio begin="5s" src="audio2.mp3" />
</seq>
</par>
</body>
SMIL 27
On peut créer une séquence avec un élément <par>

<par>
<img region="r" begin="0s" src="img1.gif" dur="4s"/>
</par>
Mais il est préférable d'employer un élément <seq>
<seq>
<img region="r" src="img1.gif" dur="4s"/>
</seq>
SMIL 28
<body>
<seq>
<img id="Publicite" src="pub.jpg" region="RPub"
dur="5s"/>
<par>
<video id="Emission" src="Emission.avi"
region="RVideo"/>
<img id="Titre" src="Titre.jpg" region="RTitre"/>
<img id="Recette" src="Recette.jpg" region="RRecette"/>
</par>
</seq>
</body>
SMIL 29
Attributs dur et fill
 Définir une durée au sein d’une séquence

<seq>
<img src="image1.jpg" region="photo" dur="22s"/>
<text src="image2.gif" region="sousTitre" dur="6s"/>
<img src="image3.jpg" region="photo" dur="7s" />
</seq>
 Figer une image pour toute la durée de la présentation
<img src="image1.jpg" region="photo" fill="freeze"/>
SMIL 30
Valeurs d’horloge
 Valeur d’horloge
 02:33:45 2h 33mn 45s
 45:24 45mn 24s
 02:00.24 2mn 0,24s
 Valeur décimale
 1.24s 1,24 secondes
 12.6h 12,6 heures
 Unités : {h, min, s, ms} s par défaut
SMIL 31
Exercice : Specifier cette organisation
temporelle en SMIL
SMIL 32
Spécification des liens hypermedias
Liens hypermédias
Interne : permet de naviguer a l'intérieur d'une même présentation.
Externe : permet de naviguer vers d'autres présentations.
SMIL 33
Spécification des liens hypermedias
<seq>
<img id="Publicite" src="pub.jpg" region="RPub"
dur="5s">
<area href="http://www.pub.com"/>
</img>
<par>
<video id="Emission" src="Emission.avi"
region="RVideo"/>
<img id="Titre" src="Titre.jpg" region="RTitre"
dur="255s">
<area href="#Publicite" dur="100s"/>
</img>
<img id="Recette" src="Recette.jpg" region="Rrecette » />
</par>
</seq>
SMIL 34
</body>
 Autres fonctionnalités
 Les animations
 Adaptation au contexte
 Specification de méta-données
 Les outils
SMIL 35
Les éditeurs
• Smil Composer
• http://real8.free.fr/log/smilinst.exe
• RealSlideshow
• http://www.realnetworks.com/products/slideshow/ind
ex.html?src=invkey&mcc=invkey
• Grins
• http://www.oratrix.com/GRiNS/
• TagFree SMIL Editor
• http://www.tagfree.co.kr/
• Projet OPERA
• http://opera.inrialpes.fr/
SMIL 36
Les lecteurs
 Real One
http://www.real.com/realone/index.html?lang=fr
&loc=fr
 Quicktime 6
http://www.apple.com/fr/quicktime/download/
 Grins (95$ pour PC)
http://www.oratrix.com/GRiNS/
 HPAS applet (last modified 6/4/98)
http://www.research.compaq.com/src/HPAS/appl
et/
SMIL 37
En savoir plus sur SMIL
 SMIL au W3C
 http://www.w3.org/TR/REC-smil/
 SMIL au CWI
 http://www.cwi.nl/~media/SMIL/
 Le site de Real
 http://www.real.com/
 Cours de DIDIER courtaud au CEA, déc. 98

 http://www.euroclid.fr/Cours_SMIL_W3C/plan.htm
SMIL 38
Conclusion
 Un outil pour cours et conférences sur le WEB

 SMIL permet de
 placer des média dans l’espace (3 dim)
 synchroniser des média dans le temps
 naviguer dans le temps
SMIL 39

Chapitre 1 SMIL

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Chapitre 1 SMIL

Transféré par

Droits d'auteur :

Formats disponibles

SMIL

Synchronized Multimedia Integration

Le XML pour eXtensible Markup Language est un

<?xml version="1.0" encoding="iso-8859-1"?>

• 2001 : SMIL 2.0

• 2005 : SMIL 2.1

• 2008 : SMIL 3.0

 Élément <layout> contient

 Description de la fenêtre principale

 Position absolue (en nombre de pixels)

<img region="r2" begin="4s" src="img.gif" />

média où quand quoi

Type de média élément

Certains éléments sont joues en « parallele ».

On peut créer une séquence avec un élément <par>

 Définir une durée au sein d’une séquence

 Cours de DIDIER courtaud au CEA, déc. 98

 Un outil pour cours et conférences sur le WEB

Vous aimerez peut-être aussi