Vous êtes sur la page 1sur 26

Crer un document multimdia avec SMIL e e

Sbastien Laborie e

Sebastien.Laborie@iutbayonne.univ-pau.fr http://www.iutbayonne.univ-pau.fr/~slaborie/

Sbastien Laborie e

Crer un document multimdia avec SMIL e e

XML : eXtensible Markup Language


Quelques rappels essentiels

Sbastien Laborie e

Sbastien Laborie e

XML : eXtensible Markup Language

Le contexte : structurer/traiter/changer des donnes e e


WWW
requte e

transformation

requte e

requte e

transformation

requte e

requte e

transformation

transformation

Ncessit de dnir un langage structur (semi-structur) et extensible. e e e e e Ncessit de prendre en compte la diversit des informations changes. e e e e e
3 Sbastien Laborie e XML : eXtensible Markup Language

XML

Document XML Composs dunits de stockage appeles entits. e e e e Ces donnes sont soit des donnes simples soit des donnes concourant au e e e marquage (balisage). Le balisage permet de dcrire la structure logique du document. e Validation dun document XML Un document XML est bien form sil respecte les r`gles de XML. e e XML fournit un mcanisme pour contraindre les structures, les DTD e (Dnition de Type de Document). e Un document XML peut tre valide par rapport ` une ou plusieurs DTD. e a

Sbastien Laborie e

XML : eXtensible Markup Language

Un exemple en XML
<?xml version="1.0" encoding="iso-8859-1"?> <carnetDeContact> <contact> <adresse> <lignesAdresse> <ligne>IUT de Bayonne et du Pays Basque</ligne> <ligne>17 Place Paul Bert</ligne> </lignesAdresse> <codePostal>64100</codePostal> <ville>BAYONNE</ville> </adresse> <url>http://www.iutbayonne.univ-pau.fr</url> <logo src="http://www.iutbayonne.univ-pau.fr/logo.jpg" /> <tel t="fixe">05.59.57.43.70</tel> <tel t="fax">05.59.57.43.79</tel> </contact> <contact>...</contact> </carnetDeContact>
5 Sbastien Laborie e XML : eXtensible Markup Language

Larbre XML
carnetDeContact contact contact

adresse

url

logo

tel

tel

lignesAdresse

codePostal

ville

ligne ligne ligne


6 Sbastien Laborie e XML : eXtensible Markup Language

Question ?

Quel langage XML connaissez-vous ?

Sbastien Laborie e

XML : eXtensible Markup Language

Les standards du W3C bass sur XML e

Sbastien Laborie e

XML : eXtensible Markup Language

SMIL : Synchronized Multimedia Integration Language


Une introduction au langage

Sbastien Laborie e

Sbastien Laborie e

SMIL : Synchronized Multimedia Integration Language

Introduction

Un exemple de document multimdia e

Synchronisation
10

Achage
Sbastien Laborie e

Interactivit e

SMIL : Synchronized Multimedia Integration Language

Introduction

Le contexte
Pourquoi utiliser le langage SMIL ? Dautres langages de spcication de documents multimdia : e e Flash PowerPoint ... SMIL est une recommandation du W3C (un standard) DTD XML = Interoperabilit e Utilisation de toutes les technologies XML (XQuery, XPath, XSLT. . .) Beaucoup de projets Open Source autour des standards (Editeurs, Players. . .) Un langage en volution constante. e

11

Sbastien Laborie e

SMIL : Synchronized Multimedia Integration Language

Introduction

Lhistoire de SMIL
1996 : W3C Workshop 1997 : Premi`re runion du groupe de travail SYMM e e 1998 : La recommandation SMIL 1.0 est ne e
Synchronisation et placement visuel dobjets multimdia e Interactivit e Capacit dadaptation ` dirents contextes e a e

2001 : SMIL 2.0


Animation Mta-donnes e e

2005 : SMIL 2.1


Eets de transitions Excution multi plates-formes (SMIL proles) e

2008 : SMIL 3.0


Outils supplmentaires de structure et de contrle de la prsentation e o e

12

Sbastien Laborie e

SMIL : Synchronized Multimedia Integration Language

Introduction

Tables des mati`res e


1

Introduction au langage SMIL Structure gnrale dun document multimdia SMIL e e e Dimension spatiale Dimension contenu Dimension temporelle Dimension hypermdia e Autres fonctionnalits e Les animations Adaptation au contexte Spcication de mta-donnes e e e Les drivs du langage SMIL e e HTML + TIME MMS SVG - Animation Les outils dvelopps autour de SMIL e e Les diteurs e Les lecteurs
Sbastien Laborie e SMIL : Synchronized Multimedia Integration Language

13

Introduction au langage SMIL

Tables des mati`res e


1

Introduction au langage SMIL Structure gnrale dun document multimdia SMIL e e e Dimension spatiale Dimension contenu Dimension temporelle Dimension hypermdia e Autres fonctionnalits e Les animations Adaptation au contexte Spcication de mta-donnes e e e Les drivs du langage SMIL e e HTML + TIME MMS SVG - Animation Les outils dvelopps autour de SMIL e e Les diteurs e Les lecteurs
Sbastien Laborie e SMIL : Synchronized Multimedia Integration Language

14

Introduction au langage SMIL

Structure gnrale dun document multimdia SMIL e e e

La structure gnrale dun document multimdia SMIL e e e

<smil> <head> ... </head> <body> ... </body> </smil>

Spcications de lachage, e des mta-donnes et des transitions e e Synchronisation des objets multimdia, e Spcication des informations hypermdia e e

15

Sbastien Laborie e

SMIL : Synchronized Multimedia Integration Language

Introduction au langage SMIL

Dimension spatiale

Spcication des zones dachage e

x y Fentre dachage e

Rgion 1 Rgion 2 Rgion 3 e e e

Rgion 4 e

...

16

Sbastien Laborie e

SMIL : Synchronized Multimedia Integration Language

Introduction au langage SMIL

Dimension spatiale

Spcication des zones dachage en SMIL e

<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="" left="" top="" width="" height="" z-index="" .../> </region> </layout> </head>

17

Sbastien Laborie e

SMIL : Synchronized Multimedia Integration Language

Introduction au langage SMIL

Dimension spatiale

Exercice : Spcier cette organisation spatiale en SMIL e


(0,0)

region1
500

region2

(200,150)

region3 region4
650

region5
(570,200)

600

18

Sbastien Laborie e

SMIL : Synchronized Multimedia Integration Language

Introduction au langage SMIL

Dimension spatiale

Le corps dun document multimdia SMIL e

<smil> <head> ... </head> <body> ... </body> </smil>

Spcications de lachage, e des mta-donnes et des animations e e Synchronisation des objets multimdia, e Spcication des informations hypermdia e e

19

Sbastien Laborie e

SMIL : Synchronized Multimedia Integration Language

Introduction au langage SMIL

Dimension contenu

Spcication des objets multimdia e e

Audio :
<audio id="..." src="..." begin="..." dur="..." end="..." />

Vido : e
<video id="..." src="..." begin="..." dur="..." />

Texte :
<text id="..." src="..." region="..." />

Image :
<img id="..." src="..." region="..." fit="fill" />

20

Sbastien Laborie e

SMIL : Synchronized Multimedia Integration Language

Introduction au langage SMIL

Dimension temporelle

Spcication de la timeline de la prsentation e e

Certains lments sont jous en parall`le. ee e e Certains lments sont jous en squence. ee e e

Publicit e

Titre Vido e Recette

0s

5s

2m 11s

21

Sbastien Laborie e

SMIL : Synchronized Multimedia Integration Language

Introduction au langage SMIL

Dimension temporelle

Spcication de la timeline en SMIL e

Conteneurs temporels SMIL : PAR et SEQ.


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

22

Sbastien Laborie e

SMIL : Synchronized Multimedia Integration Language

Introduction au langage SMIL

Dimension temporelle

Exercice : Spcier cette organisation temporelle en SMIL e

Image irit.jpg Image carte.jpg

Texte sous-titrage.rt Vido e presentation.avi Musique music.mp3

0s 5s

20s

95s

23

Sbastien Laborie e

SMIL : Synchronized Multimedia Integration Language

Introduction au langage SMIL

Dimension hypermdia e

Spcication de liens hypermdia e e


Denition Liens hypermdia e Interne : permet de naviguer ` lintrieur dune mme prsentation. a e e e Externe : permet de naviguer vers dautres prsentations. e

l1 Publicit e Titre Vido e Recette 0s


24

5s
Sbastien Laborie e

Autre document
SMIL : Synchronized Multimedia Integration Language

2m 11s

Introduction au langage SMIL

Dimension hypermdia e

Spcication de liens hypermdia en SMIL e e


<body> <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"> <area coords="0,85,260,103" href="command:seek(52)"/> </img> </par> </seq> </body>
25 Sbastien Laborie e SMIL : Synchronized Multimedia Integration Language

Autres fonctionnalits e

Tables des mati`res e


1

Introduction au langage SMIL Structure gnrale dun document multimdia SMIL e e e Dimension spatiale Dimension contenu Dimension temporelle Dimension hypermdia e Autres fonctionnalits e Les animations Adaptation au contexte Spcication de mta-donnes e e e Les drivs du langage SMIL e e HTML + TIME MMS SVG - Animation Les outils dvelopps autour de SMIL e e Les diteurs e Les lecteurs
Sbastien Laborie e SMIL : Synchronized Multimedia Integration Language

26

Autres fonctionnalits e

Les animations

Les animations

Dnition (animation) e Lanimation consiste ` donner lillusion dun mouvement ` laide dune suite a a dimages. Examples danimation Mouvement dun ensemble dobjets
Translation Rotation

Modication de lapparence dun objet


Modication de taille Changement de couleurs

27

Sbastien Laborie e

SMIL : Synchronized Multimedia Integration Language

Autres fonctionnalits e

Les animations

Les animations en SMIL


Spcication dune animation e Une animation en SMIL se dcrit dans la spcication dun objet multimdia. e e e Dclaration de lanimation e Mouvement dun ensemble dobjets
Translation : <animateMotion targetElement="region" from="0,0" to="10,10" dur="3s"/> Pas de rotation

Modication de lapparence dun objet :


Modication de taille : <animate attributeName="left" from="200" to="0"/> Changement de couleur : <animate attributeName="fill" from="red" to="blue"/>

Application de lanimation <img src="img.jpg" dur="20s"> <animate ... /> </img>


28 Sbastien Laborie e SMIL : Synchronized Multimedia Integration Language

Autres fonctionnalits e

Les animations

Les eets de transition

Dnition (eets de transitions) e Les eets de transition sont des animations particuli`res qui se droulent au dbut e e e ou ` la n de la prsentation dun ensemble dobjets multimdia. a e e Plusieurs types deets de transition Fondu-encha e n Apparition ou disparition (e.g., sous forme dtoile) e ...

29

Sbastien Laborie e

SMIL : Synchronized Multimedia Integration Language

Autres fonctionnalits e

Les animations

Les eets de transition en SMIL


Spcication des eets de transition e Les eets de transition en SMIL se dclarent gnralement dans lentte head du e e e e document. Dclaration de la transition (partie head) e <transition id="fondu" type="fade" dur="5s" /> <transition id="etoile" type="starWipe" subtype="fivePoint" dur="5s" /> Application de la transition au contenu (partie body) <seq> <img src="img1.jpg" dur="30s" transIn="etoile" transOut="fondu"/> <img src="img2.jpg" dur="30s" transIn="fondu"/> </seq>

30

Sbastien Laborie e

SMIL : Synchronized Multimedia Integration Language

Autres fonctionnalits e

Les animations

Exercice : Spcier des animations et des transitions e

Inverser image 1 et image 2 en les faisant se croiser en mme temps e Faire dispara tre limage de fond en toile apr`s linversion e e
(200,150)

Image de fond Image 1


650

Image 2
(570,200)

31

Sbastien Laborie e

SMIL : Synchronized Multimedia Integration Language

Autres fonctionnalits e

Adaptation au contexte

Adaptation de documents multimdia e

Adaptation

Prol1
32 Sbastien Laborie e

Prol2

Prol3

SMIL : Synchronized Multimedia Integration Language

Autres fonctionnalits e

Adaptation au contexte

Spcication dalternatives en SMIL e


... <par> <video id="Demo" src="Demo.avi" region="r1"/> <switch> <audio systemOperatingSystem="palmos" systemLanguage="en" src="Commentaire-palm.au" .../> <audio systemLanguage="en" src="Commentaire-en.au" .../> <audio systemLanguage="de" src="Commentaire-de.au" .../> <audio src="Commentaire.au" .../> </switch> </par> ...

33

Sbastien Laborie e

SMIL : Synchronized Multimedia Integration Language

Autres fonctionnalits e

Spcication de mta-donnes e e e

Spcication de mta-donnes simples e e e

Dnition (mta-donne simple) e e e Une mta-donne simple est une description textuelle dune donne. e e e Des exemples de mta-donnes simples e e Lauteur du document. La date de cration du document. e Lditeur e Les droits ...

34

Sbastien Laborie e

SMIL : Synchronized Multimedia Integration Language

Autres fonctionnalits e

Spcication de mta-donnes e e e

Spcication de mta-donnes simple en SMIL e e e

<head>

...
<meta name="Author" content="Sebastien Laborie"/> <meta name="Author" content="Florence Sedes"/> <meta name="Date" content="27-10-2008"/> <meta name="Publisher" content="IRIT"/> <meta name="Rights" content="Copyright 2008 Laborie"/>

...
</head>

35

Sbastien Laborie e

SMIL : Synchronized Multimedia Integration Language

Autres fonctionnalits e

Spcication de mta-donnes e e e

Recherche dune mta-donne simple e e

Requte : cherchez les noms des auteurs du document SMIL e Utilisation XQuery for $x in doc(cremeAnglaise.smil)/smil/head/meta[@name=Author] return $x/@content sorted by @content Rponse e Florence Sedes Sebastien Laborie

36

Sbastien Laborie e

SMIL : Synchronized Multimedia Integration Language

Les drivs du langage SMIL e e

Tables des mati`res e


1

Introduction au langage SMIL Structure gnrale dun document multimdia SMIL e e e Dimension spatiale Dimension contenu Dimension temporelle Dimension hypermdia e Autres fonctionnalits e Les animations Adaptation au contexte Spcication de mta-donnes e e e Les drivs du langage SMIL e e HTML + TIME MMS SVG - Animation Les outils dvelopps autour de SMIL e e Les diteurs e Les lecteurs
Sbastien Laborie e SMIL : Synchronized Multimedia Integration Language

37

Les drivs du langage SMIL e e

HTML + TIME

HTML+TIME

Timed Interactive Multimedia Extensions for HTML Ajoute une dimension temporelle aux pages web. Bas sur le module temporel de SMIL : e
Synchronisation des contenus multimdia. e Utilisation des conteneurs temporels. Permet la spcication danimations. e

Pas de langage de scripts pour animer la page. On manipule toujours du XML.

38

Sbastien Laborie e

SMIL : Synchronized Multimedia Integration Language

Les drivs du langage SMIL e e

HTML + TIME

Un exemple de code HTML+TIME

<body> <t:par begin="1s"> <t:audio src="talk.mp3"/> <p timeContainer="seq"> <span dur="2.9s" timeAction="class:highlight">SMIL Timing syntax consists of a set of </span><br/> <span dur="3s" timeAction="class:highlight">attributes for controlling the behavior of media, </span><br/> <span dur="2s" timeAction="class:highlight">and several types of time containers </span><br/> <span dur="4s" timeAction="class:highlight">that group media together for coordinated presentation.</span> </p> </t:par> </body>

39

Sbastien Laborie e

SMIL : Synchronized Multimedia Integration Language

Les drivs du langage SMIL e e

MMS

MMS

Multimedia Messaging Service Envoyer des messages multimdia entre plates-formes mobiles. e Bas sur le langage SMIL : e
Synchronisation des contenus multimdia. e Placement visuel des contenus multimdia. e Interactivit. e

La spcication de la prsentation est peu volumineuse. e e Les contenus sont encods dans le document MMS. e

40

Sbastien Laborie e

SMIL : Synchronized Multimedia Integration Language

Les drivs du langage SMIL e e

MMS

Un exemple de code MMS


start="<SMIL>"; type="application/smil" Content-ID: <messageContent> Content-Type: application/smil; name="smil.smil" Content-ID: <SMIL> Content-Location: smil.smil <smil> <head> <layout> <root-layout height="191" width="128"/> <region id="avatar" top="0" left="0" height="96" width="128" fit="hidden"/> <region id="txt" top="96" left="0" height="80" width="128" fit="hidden"/> <region id="reply" top="176" left="0" height="15" width="128" fit="hidden"/> </layout> </head> <body> <par dur="10s"> <img src="logo.gif" region="avatar" begin="0s" repeatDur="10s" /> <audio src="audio.amr" begin="0s" /> <text src="url.txt" region="txt" begin="0s" /> <a href="tel:1234567890"><text src="reply.txt" region="reply" begin="0s" /></a> </par> </body> </smil> Content-Type: image/gif; name="logo.gif" Content-Transfer-Encoding: base64 Content-ID: logo Content-Location: logo.gif R0lGODlhgABgAMMAAP///8zMzEAgMAAAAHBAYLBwkICAgGAgQNBAkP+ZzP8wsJkzZuCAsJBQcNgN*snip* nAML74Y7Og6yejwClJ+YsU62mm8EAAA7 Content-Type: audio/amr; name="audio.amr" Content-Transfer-Encoding: base64 Content-ID: audio Content-Location: audio.amr IyFBTVIKPHA6cpg8ggZIwmH4IURQR8AACAppIJnAAAQLBFvnQZA8Po3aqNkAHgHjivZPIAJ8rU+m*snip*/E/pbLYCCbJWN8Ju6TYkCNA= ... 41 Sbastien Laborie e SMIL : Synchronized Multimedia Integration Language

Les drivs du langage SMIL e e

SVG - Animation

SVG

Scalable Vector Graphics Raliser des dessins vectoriels. e Lanimation du dessin SVG est base sur le module animation de SMIL : e
animate. animateMotion. animateTransform.

Pas de langage de scripts pour animer la page. On manipule toujours du XML.

42

Sbastien Laborie e

SMIL : Synchronized Multimedia Integration Language

Les drivs du langage SMIL e e

SVG - Animation

Un exemple de SVG

<svg xmlns="http://www.w3.org/2000/svg"> <style type="text/css"> circle:hover fill-opacity:0.9; </style> <g style="fill-opacity:0.7;"> <circle cx="6.5cm" cy="2cm" r="100" style="fill:red;stroke:black; stroke-width:0.1cm" transform="translate(0,50)" /> <circle cx="6.5cm" cy="2cm" r="100" style="fill:blue;stroke:black; stroke-width:0.1cm" transform="translate(70,150)" /> <circle cx="6.5cm" cy="2cm" r="100" style="fill:green;stroke:black; stroke-width:0.1cm" transform="translate(-70,150)"/> </g> </svg>

43

Sbastien Laborie e

SMIL : Synchronized Multimedia Integration Language

Les drivs du langage SMIL e e

SVG - Animation

Un exemple de SVG avec du SMIL

<svg xmlns="http://www.w3.org/2000/svg"> <style type="text/css"> circle:hover fill-opacity:0.9; </style> <g style="fill-opacity:0.7;"> <circle cx="6.5cm" cy="2cm" r="100" style="fill:red;stroke:black; stroke-width:0.1cm" transform="translate(0,50)"> <animateMotion path="..."/> </circle> <circle cx="6.5cm" cy="2cm" r="100" style="fill:blue;stroke:black; stroke-width:0.1cm" transform="translate(70,150)" /> <circle cx="6.5cm" cy="2cm" r="100" style="fill:green;stroke:black; stroke-width:0.1cm" transform="translate(-70,150)"/> </g> </svg>

44

Sbastien Laborie e

SMIL : Synchronized Multimedia Integration Language

Les outils dvelopps autour de SMIL e e

Tables des mati`res e


1

Introduction au langage SMIL Structure gnrale dun document multimdia SMIL e e e Dimension spatiale Dimension contenu Dimension temporelle Dimension hypermdia e Autres fonctionnalits e Les animations Adaptation au contexte Spcication de mta-donnes e e e Les drivs du langage SMIL e e HTML + TIME MMS SVG - Animation Les outils dvelopps autour de SMIL e e Les diteurs e Les lecteurs
Sbastien Laborie e SMIL : Synchronized Multimedia Integration Language

45

Les outils dvelopps autour de SMIL e e

Les diteurs e

LimSee (http://limsee2.gforge.inria.fr)

46

Sbastien Laborie e

SMIL : Synchronized Multimedia Integration Language

Les outils dvelopps autour de SMIL e e

Les diteurs e

Adobe GoLive (http://www.adobe.com)

47

Sbastien Laborie e

SMIL : Synchronized Multimedia Integration Language

Les outils dvelopps autour de SMIL e e

Les lecteurs

Les lecteurs de documents SMIL

Quicktime (SMIL 1.0) Real Player et Grins (SMIL 2.0) PocketSMIL (SMIL 2.0 sur PDA) Ambulant (SMIL 2.1 et SMIL 3.0) Internet Explorer (HTML+TIME) RubiC (MMS)

48

Sbastien Laborie e

SMIL : Synchronized Multimedia Integration Language

Conclusion et perspectives

Conclusion

SMIL est un langage standard qui permet de spcier des e prsentations multimdias e e
Spcication des multiples dimensions des documents multimdia e e
contenu, temporelle, spatiale et hypermdia e animations, transitions. . .

Spcications de mta-donnes e e e Utilisation de toutes les technologies XML (XPath, XSLT. . .) Dveloppement de projets Open Source (Editeur, Player) e Un langage en volution constante e

49

Sbastien Laborie e

SMIL : Synchronized Multimedia Integration Language

Conclusion et perspectives

Perspectives

SMIL est un standard mais nest pas le langage le plus utilis e


Des projets de recherche autour de ce langage sont en cours.
Adaptation et transformations de documents SMIL

Dautres formes du langage (SMIL Proles) sont en laboration. e


Des e-mails dcrits en SMIL e

Lutilisation du langage sur diverses plates-formes se gnralise. e e


Tlvision, Set-top boxes, lecteurs multimdia. . . ee e

Le langage est utilis dans lindustrie (e.g., Adobe, Real). e


Windows Media Player. . .

50

Sbastien Laborie e

SMIL : Synchronized Multimedia Integration Language

Questions

Questions ?

Les slides sont disponibles ` ladresse suivante a

http://www.iutbayonne.univ-pau.fr/~slaborie/SMIL/Cours-SMIL.pdf

51

Sbastien Laborie e

SMIL : Synchronized Multimedia Integration Language