Exemples de DTD XML pour les interfaces homme-machine JMF

Dimension: px

Commencer à balayer dès la page:

Download "Exemples de DTD XML pour les interfaces homme-machine JMF"

Thierry St-Laurent
il y a 8 ans
Total affichages :

1 Exemples de DTD XML pour les interfaces homme-machine 1

2 Introduction XML utilisé pour les IHM Plusieurs DTD : SMIL, SVG, X3D Evidemment du texte (XML) balisé 2

3 SMIL (pronounced "smile") 3

4 4 Présentation SMIL = Synchronized Multimedia Integration Language Spécification du W3C pour des présentations audio visuelles interactives de technologie multimédia "riches" audio et vidéo en flot (streaming) comportant aussi des images et du texte. Site de référence de SMIL : Actuellement (janvier 2009) version SMIL 3.0

audio et vidéo en flot (streaming) comportant aussi des images et du texte.

5 5 SMIL = Permet une description : temporelle, positionelle, et le comportement aux interactions utilisateur d'une présentation multimedia => ~ la TV interactive du web? Soutenu par le W3C, RealNetworks, IBM, Intel, Macromedia, Microsoft, Netscape/AOL, Nokia, Ericsson, Canon, Panasonic, Philips, et d'autres Complètement gratuit

6 Interpréteurs SMIL Voir à : Certains disponibles pour Linux, Linux/PDA, Mac OS X, Windows et WinCE Lecteur SMIL : AMBULANT 2.0 ( pour SMIL 3.0 plusieurs pour SMIL 2.x dont RealPlayer 6

7 SMIL : syntaxe (1) Les deux premières lignes d'un document SMIL (2.0) (le prologue XML) sont : <?xml version="1.0"?> <!DOCTYPE smil PUBLIC "-//W3C//DTD SMIL 2.0//EN" " La racine d'un document SMIL (après le prologue) est l'élément <smil> possédant au moins son attribut XML namespace, parfois complété par la langue et un titre du document. Par exemple : <smil xmlns=" xml:lang="en" title="smil template"> </smil> 7

dtd"> La racine d'un document SMIL (après le prologue) est l'élément <smil> possédant au moins son attribut XML namespace,

8 SMIL : syntaxe (2) L'élément <smil> possède deux sous éléments <head> et <body> Un document SMIL minimal : <?xml version="1.0"?> <!DOCTYPE smil PUBLIC "-//W3C//DTD SMIL 2.0//EN" " <smil xmlns=" xml:lang="en" title="smil template"> <head> </head> <body> </body> </smil> La balise <head> contient les informations sur la présentation comme : layout : la mise en forme 8 meta : propriétés de la présentation

9 SMIL : syntaxe (3) La balise <body> contient le déroulement dans le temps (la partie temporelle) Ces principales balises sont : a : Lien par : Lecture parallèle de plusieurs médias seq : Sequence switch : Choix à l'utilisateur ainsi que les "média objects" 9

: Lien par : Lecture parallèle de plusieurs médias seq :

10 media objects Media object = un objet multimédia = Une image (jpeg, gif, png, etc.). Une video (mpeg, avi, mov, etc.), avec ou sans le son Un son (mp3, wav, au, aiff, rm, mov). image vectorielle (svg, swf, etc). une texte plein (txt, ascii, etc). un texte "streamé" "temporel" (sub, rt, sami, etc). Balise associée : img video audio animation text textstream 10

image vectorielle (svg, swf, etc). une texte plein (txt, ascii, etc).

11 Media object : syntaxe Exemples : ne pas oublier / (XML oblige) <img src="picture.jpg"/> <video src="movie.mpg"/> attribut src MediaClipping pour une vidéo utilisation des attributs clipbegin, clipend  <video src="movie.mpg" clipbegin="20s"/>  <video src="movie.mpg" clipend="14:30"/>  <video src="movie.mpg" clipbegin="14:55.7" clipend="14:55.7"/> 11

-- Exécute la video immédiatement mais après ses 20 premières secondes --> <video src="movie.mpg" clipbegin="20s"/> <!

12 Synchronization Multimedia C'est le but de SMIL!! La séquencialité : balise seq <seq> <video src="video1.mpg" /> <video src="video2.mpg" /> <video src="video3.mpg" /> </seq> La simultanéité : balise par <par> <video src="video1.mpg" /> <video src="video2.mpg" /> <video src="video3.mpg" /> </par> 12

13 Itérations Répéte 4 fois un fichier son : <audio src="telephone.wav" repeatcount="4"/> Exécute (éventuellement en bouclant) 16 secondes <audio src="telephone.wav" repeatdur="16s"/> 13

14 Attribut id Exemple Identifier les medias <par> <video id="v1" src="video1.mpg"/> <video id="v2" src="video2.mpg" begin="v1.end+00:02"/> <video id="v3" src="video3.mpg" begin="v2.end+00:02"/> </par> => par devient seq!! 14

15 Région = rectangle Deux étapes : on définit une région 15 Placement des medias on met le média dans la région Balise region, ayant pour attribut : width et height, largeur et hauteur du rectangle left, right, top et bottom, coordonnées des sommets fit indique que le media doit remplir la région regionname = nom de la région ~ id pour un media. z-index : poids de la région. Les régions de plus fort poids sont empilées sur les autres ~ valeur dans l'axe z Les unités de longueur peuvent être px, cm, mm (cf. CSS à et %

remplir la région regionname = nom de la région ~ id pour un media. z-index : poids de la région.

16 Placement des medias : syntaxe Les régions sont définies avec la balise region dans l'unique balise layout sous-balise de head. Un exemple : <head> <layout> <region id="regionvideo" width="352px" height="240px"/> <region id="regionpourphoto" width="6in" height="4in"/> <region id="half-center" left="25%" top="25%" width="50%" height="50%"/> </layout> </head> 16

Un exemple : <head> <layout> <region id="regionvideo" width="352px" height="240px"/>

17 Placement des medias : synthèse Un exemple : <?xml version="1.0"?> <!DOCTYPE smil PUBLIC "-//W3C//DTD SMIL 2.0//EN" " <smil xmlns=" xml:lang="en" title="smil template"> <head> <layout> <region regionname="half-center" left="25%" top="25%" width="50%" height="50%"/> </layout> </head> <body> <video src="mambodance.mpg" region="half-center"/> </body> </smil> Une demo avec AmbulantPlayer, fichier avecregionname.smil on peut utiliser id à la place de regionname 17

org/2001/smil20/language" xml:lang="en" title="smil template"> <head> <layout> <region regionname="half-center" left="25%" top="25%"

18 Un exemple plus complet Un exemple complet : <?xml version="1.0"?> <!DOCTYPE smil PUBLIC "-//W3C//DTD SMIL 2.0//EN" " <smil xmlns=" xml:lang="en" title="picture-in-picture Television"> <head> <layout> <toplayout width="640px" height="480px"> <region id="main-video" left="0%" top="0%" width="100%" height="100%" fit="fill"/> <region id="corner-video" left="67%" top="67%" width="33%" height="33%" fit="fill"/> </toplayout> </layout> </head> <body> <par> <video id="chameleon-video" src="chameleo2001.mpg" end="20s" region="main-video"/> <video id="mambo" src="mambodance.mpg" region="corner-video" begin="3s"/> </par> </body> </smil> Une demo : complet.smil 18

width="100%" height="100%" fit="fill"/> <region id="corner-video" left="67%" top="67%" width="33%" height="33%" fit="fill"/> </toplayout> </layout> </head> <body> <par> <video

19 Les animations avec SMIL (1/2) Voir à Plusieurs balises sont disponibles. Elles ont des attributs (supplémentaires) d animation comme : attributename Indique le nom de l attribut sur lequel porte l animation targetelement Permet d animer une région from, to, and by Indique les bornes de l attribut animé Un exemple : <region id= oeil" width="0px" height="30px" top="50px" left="50px" fit="fill"/> <animate targetelement="oeil" attributename="width" to="30px" dur="3s fill="freeze"/> freeze indique de geler la valeur finale (sinon l animation revient aux valeurs initiales) 19

animer une région from, to, and by Indique les bornes de l attribut animé Un exemple : <region id= oeil" width="0px" height="30px" top="50px" left="50px"

20 Les animations avec SMIL (2/2) Une demo : animation.smil dans RealPlayer <?xml version="1.0"?> <!DOCTYPE smil PUBLIC "-//W3C//DTD SMIL 2.0//EN" " <smil xmlns=" xml:lang="en" title="animated SMILe"> <head> <layout> <toplayout width="320px" height="240px" backgroundcolor="#000000"> <region id="left-eye" width="0px" height="30px" top="50px" left="50px" fit="fill"/> <region id="right-eye" width="30px" height="0px" top="140px" left="50px" fit="fill"/> <region id="nose" width="0px" height="30px" top="100px" left="120px" fit="fill"/> <region id="mouth" width="49px" height="0px" top="25px" left="245px" fit="fill"/> </toplayout> </layout> </head> <body> <par> <brush color="#ffffff" region="left-eye"/> <brush color="#ffffff" region="right-eye"/> <brush color="#ffffff" region="nose"/> <img src="smile.png" alt="a SMILe" region="mouth"/> <animate targetelement="left-eye" attributename="width" to="30px" dur="3s" fill="freeze"/> <animate targetelement="right-eye" attributename="height" to="80px" dur="3s" fill="freeze"/> <animate targetelement="nose" attributename="width" to="100px" dur="3s" fill="freeze"/> </par> </body> </smil> <animate targetelement="mouth" attributename="height" to="190px" dur="3s" fill="freeze"/> 20 Un smiley (mouais ;-)

org/2001/smil20/language" xml:lang="en" title="animated SMILe"> <head> <layout> <toplayout width="320px" height="240px" backgroundcolor="#000000"> <region id="left-eye" width="0px" height="30px"

21 Bibliographie SMIL page d'accueil du site de référence sur SMIL Un tutorial en français : 21