Créer un document multimédia avec SMIL

Transcription

1 Créer un document multimédia avec SMIL Sébastien Laborie 1 Sébastien Laborie Créer un document multimédia avec SMIL XML : extensible Markup Language Quelques rappels essentiels Sébastien Laborie 2 Sébastien Laborie XML : extensible Markup Language

2 Le contexte : structurer/traiter/échanger des données WWW requête transformation requête requête transformation requête requête transformation transformation Nécessité de définir un langage structuré (semi-structuré) et extensible. Nécessité de prendre en compte la diversité des informations échangées. 3 Sébastien Laborie XML : extensible Markup Language XML Document XML Composés 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. Validation d un document XML Un document XML est bien formé s il respecte les règles de XML. XML fournit un mécanisme pour contraindre les structures, les DTD (Définition de Type de Document). Un document XML peut être valide par rapport à une ou plusieurs DTD. 4 Sébastien Laborie XML : extensible Markup Language

3 Un exemple en XML <?xml version="1.0" encoding="iso "?> <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> <logo src=" /> <tel t="fixe"> </tel> <tel t="fax"> </tel> </contact> <contact>...</contact> </carnetdecontact> 5 Sébastien Laborie XML : extensible Markup Language L arbre XML carnetdecontact contact contact adresse url logo tel tel lignesadresse codepostal ville ligne ligne ligne 6 Sébastien Laborie XML : extensible Markup Language

4 Question? Quel langage XML connaissez-vous? 7 Sébastien Laborie XML : extensible Markup Language Les standards du W3C basés sur XML 8 Sébastien Laborie XML : extensible Markup Language

5 SMIL : Synchronized Multimedia Integration Language Une introduction au langage Sébastien Laborie 9 Sébastien Laborie SMIL : Synchronized Multimedia Integration Language Introduction Un exemple de document multimédia Synchronisation Affichage Interactivité 10 Sébastien Laborie SMIL : Synchronized Multimedia Integration Language

6 Le contexte Introduction Pourquoi utiliser le langage SMIL? D autres langages de spécification de documents multimédia : 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 = Interoperabilité Utilisation de toutes les technologies XML (XQuery, XPath, XSLT...) Beaucoup de projets Open Source autour des standards (Editeurs, Players...) Un langage en évolution constante. 11 Sébastien Laborie SMIL : Synchronized Multimedia Integration Language L histoire de SMIL Introduction 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 à différents contextes 2001 : SMIL 2.0 Animation Méta-données 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 12 Sébastien Laborie SMIL : Synchronized Multimedia Integration Language

7 Tables des matières Introduction 1 Introduction au langage SMIL Structure générale d un document multimédia SMIL Dimension spatiale Dimension contenu Dimension temporelle Dimension hypermédia 2 Autres fonctionnalités Les animations Adaptation au contexte Spécification de méta-données 3 Les dérivés du langage SMIL HTML+TIME puis Timesheets SMIL Timesheets MMS SVG - Animation 4 Les outils développés autour de SMIL Les éditeurs Les lecteurs 13 Sébastien Laborie SMIL : Synchronized Multimedia Integration Language Introduction au langage SMIL Tables des matières 1 Introduction au langage SMIL Structure générale d un document multimédia SMIL Dimension spatiale Dimension contenu Dimension temporelle Dimension hypermédia 2 Autres fonctionnalités Les animations Adaptation au contexte Spécification de méta-données 3 Les dérivés du langage SMIL HTML+TIME puis Timesheets SMIL Timesheets MMS SVG - Animation 4 Les outils développés autour de SMIL Les éditeurs Les lecteurs 14 Sébastien Laborie SMIL : Synchronized Multimedia Integration Language

8 Introduction au langage SMIL Structure générale d un document multimédia SMIL La structure générale d un document multimédia SMIL <smil> <head>... </head> <body>... </body> </smil> Spécifications de l affichage, des méta-données et des transitions Synchronisation des objets multimédia, Spécification des informations hypermédia 15 Sébastien Laborie SMIL : Synchronized Multimedia Integration Language Introduction au langage SMIL Dimension spatiale Spécification des zones d affichage x y Région englobante Région 1 Région 2 Région 3 Région Sébastien Laborie SMIL : Synchronized Multimedia Integration Language

9 Introduction au langage SMIL Dimension spatiale Spécification des zones d affichage en SMIL <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> 17 Sébastien Laborie SMIL : Synchronized Multimedia Integration Language Introduction au langage SMIL Dimension spatiale Exercice : Spécifier cette organisation spatiale en SMIL (0,0) region1 region2 500 (200,150) region4 region3 650 region5 (570,200) Sébastien Laborie SMIL : Synchronized Multimedia Integration Language

10 Introduction au langage SMIL Dimension contenu Le corps d un document multimédia SMIL <smil> <head>... </head> <body>... </body> </smil> Spécifications de l affichage, des méta-données et des animations Synchronisation des objets multimédia, Spécification des informations hypermédia 19 Sébastien Laborie SMIL : Synchronized Multimedia Integration Language Introduction au langage SMIL Dimension contenu Le corps d un document multimédia SMIL 20 Sébastien Laborie SMIL : Synchronized Multimedia Integration Language

11 Introduction au langage SMIL Dimension contenu Spécification des objets multimédia Audio : <audio id="..." src="..." begin="..." dur="..." end="..." /> Vidéo : <video id="..." src="..." begin="..." dur="..." /> Texte : <text id="..." src="..." region="..." /> Image : <img id="..." src="..." region="..." fit="fill" /> 21 Sébastien Laborie SMIL : Synchronized Multimedia Integration Language Introduction au langage SMIL Dimension temporelle Spécification de la timeline de la présentation Certains éléments sont joués en parallèle. Certains éléments sont joués en séquence. Publicité Titre Vidéo Recette 0s 5s 2m 11s 22 Sébastien Laborie SMIL : Synchronized Multimedia Integration Language

12 Introduction au langage SMIL Dimension temporelle Spécification de la timeline en SMIL 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> 23 Sébastien Laborie SMIL : Synchronized Multimedia Integration Language Introduction au langage SMIL Dimension temporelle Exercice : Spécifier cette organisation temporelle en SMIL Image irit.jpg Image carte.jpg Texte sous-titrage.rt Vidéo presentation.avi Musique music.mp3 0s 5s 20s 95s 24 Sébastien Laborie SMIL : Synchronized Multimedia Integration Language

13 Introduction au langage SMIL Spécification de liens hypermédia Dimension hypermédia Definition Liens hypermédia Interne : permet de naviguer à l intérieur d une même présentation. Externe : permet de naviguer vers d autres présentations. l 1 Publicité Titre Vidéo Recette 0s 5s 2m 11s Autre document 25 Sébastien Laborie SMIL : Synchronized Multimedia Integration Language Introduction au langage SMIL Dimension hypermédia Spécification de liens hypermédia en SMIL <body> <seq> <img id="publicite" src="pub.jpg" region="rpub" dur="5s"> <area href=" </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> 26 Sébastien Laborie SMIL : Synchronized Multimedia Integration Language

14 Autres fonctionnalités Tables des matières 1 Introduction au langage SMIL Structure générale d un document multimédia SMIL Dimension spatiale Dimension contenu Dimension temporelle Dimension hypermédia 2 Autres fonctionnalités Les animations Adaptation au contexte Spécification de méta-données 3 Les dérivés du langage SMIL HTML+TIME puis Timesheets SMIL Timesheets MMS SVG - Animation 4 Les outils développés autour de SMIL Les éditeurs Les lecteurs 27 Sébastien Laborie SMIL : Synchronized Multimedia Integration Language Les animations Autres fonctionnalités Les animations Définition (animation) L animation consiste à donner l illusion d un mouvement à l aide d une suite d images. Examples d animation Mouvement d un ensemble d objets Translation Rotation Modification de l apparence d un objet Modification de taille Changement de couleurs 28 Sébastien Laborie SMIL : Synchronized Multimedia Integration Language

15 Autres fonctionnalités Les animations en SMIL Les animations Spécification d une animation Une animation en SMIL se décrit dans la spécification d un objet multimédia. Déclaration de l animation Mouvement d un ensemble d objets Translation : <animatemotion targetelement="idregion" from="0,0" to="10,10" dur="3s"/> Pas de rotation Modification de l apparence d un objet : Modification de taille : <animate attributename="left" from="200" to="0"/> Changement de couleur : <animate attributename="fill" from="red" to="blue"/> Application de l animation ou de plusieurs animations <img src="img.jpg" dur="20s"> <animate... /> </img> 29 Sébastien Laborie SMIL : Synchronized Multimedia Integration Language Les effets de transition Autres fonctionnalités Les animations Définition (effets de transitions) Les effets de transition sont des animations particulières qui se déroulent au début ou à la fin de la présentation d un ensemble d objets multimédia. Plusieurs types d effets de transition Fondu-enchaîné Apparition ou disparition (e.g., sous forme d étoile) Sébastien Laborie SMIL : Synchronized Multimedia Integration Language

16 Autres fonctionnalités Les effets de transition en SMIL Les animations Spécification des effets de transition Les effets de transition en SMIL se déclarent dans l entête head du document. Déclaration de la transition (partie head) <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> 31 Sébastien Laborie SMIL : Synchronized Multimedia Integration Language Autres fonctionnalités Les animations Exercice : Spécifier des animations et des transitions Inverser image 1 et image 2 en les faisant se croiser en même temps Faire disparaître l image de fond en étoile après l inversion (200,150) Image de fond Image Image 2 (570,200) 32 Sébastien Laborie SMIL : Synchronized Multimedia Integration Language

17 Autres fonctionnalite s Adaptation au contexte Adaptation de documents multime dia Adaptation Profil1 33 Profil2 Se bastien Laborie Autres fonctionnalite s Profil3 SMIL : Synchronized Multimedia Integration Language Adaptation au contexte Spe cification d alternatives en SMIL... <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> Se bastien Laborie SMIL : Synchronized Multimedia Integration Language

18 Autres fonctionnalités Spécification de méta-données Spécification de méta-données simples Définition (méta-donnée simple) Une méta-donnée simple est une description textuelle d une donnée. Des exemples de méta-données simples L auteur du document. La date de création du document. L éditeur Les droits Sébastien Laborie SMIL : Synchronized Multimedia Integration Language Autres fonctionnalités Spécification de méta-données Spécification de méta-données simple en SMIL <head>... </head> <meta name="author" content="sebastien Laborie"/> <meta name="author" content="florence Sedes"/> <meta name="date" content=" "/> <meta name="publisher" content="irit"/> <meta name="rights" content="copyright 2008 Laborie"/> Sébastien Laborie SMIL : Synchronized Multimedia Integration Language

19 Autres fonctionnalités Spécification de méta-données Recherche d une méta-donnée simple Requête : cherchez les noms des auteurs du document SMIL Utilisation XQuery for $x in doc( cremeanglaise.smil )/smil/head/meta[@name= Author ] return $x/@content sorted Réponse Florence Sedes Sebastien Laborie 37 Sébastien Laborie SMIL : Synchronized Multimedia Integration Language Les dérivés du langage SMIL Tables des matières 1 Introduction au langage SMIL Structure générale d un document multimédia SMIL Dimension spatiale Dimension contenu Dimension temporelle Dimension hypermédia 2 Autres fonctionnalités Les animations Adaptation au contexte Spécification de méta-données 3 Les dérivés du langage SMIL HTML+TIME puis Timesheets SMIL Timesheets MMS SVG - Animation 4 Les outils développés autour de SMIL Les éditeurs Les lecteurs 38 Sébastien Laborie SMIL : Synchronized Multimedia Integration Language

20 HTML+TIME (1998) Les dérivés du langage SMIL HTML+TIME puis Timesheets Timed Interactive Multimedia Extensions for HTML Ajoute une dimension temporelle aux pages web. Basé sur le module temporel de SMIL : Synchronisation des contenus multimédia. Utilisation des conteneurs temporels. Permet la spécification d animations. Pas de langage de scripts pour animer la page. On manipule toujours du XML. Ne fonctionne que sur certaines versions d IE. 39 Sébastien Laborie SMIL : Synchronized Multimedia Integration Language Les dérivés du langage SMIL Un exemple de code HTML+TIME HTML+TIME puis Timesheets Source : http :// (point 2) <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> 40 Sébastien Laborie SMIL : Synchronized Multimedia Integration Language

21 Les dérivés du langage SMIL SMIL Timesheets (2008) SMIL Timesheets Ajoute une dimension temporelle aux pages web. Implémentation en Javascript du module temporel de SMIL. Permet de spécifier des feuilles de style temporelles. Fonctionne sur de nombreux navigateurs. 41 Sébastien Laborie SMIL : Synchronized Multimedia Integration Language Les dérivés du langage SMIL Exemple de SMIL Timesheets SMIL Timesheets Source : http ://wam.inrialpes.fr/timesheets/ <script type="text/javascript" src="timesheets.js"></script>... <body> <div id="banner" smil:timecontainer="seq" smil:repeatcount="indefinite"> <img smil:dur="3s" src="images/dosbox.png" /> <img smil:dur="3s" src="images/gnote.png"/> <img smil:dur="3s" src="images/gpodder.png"/> <img smil:dur="3s" src="images/transmission.png" </div> </body> 42 Sébastien Laborie SMIL : Synchronized Multimedia Integration Language

22 MMS Les dérivés du langage SMIL MMS Multimedia Messaging Service Envoyer des messages multimédia entre plates-formes mobiles. Basé sur le langage SMIL : Synchronisation des contenus multimédia. Placement visuel des contenus multimédia. Interactivité. La spécification de la présentation est peu volumineuse. Les contenus sont encodés dans le document MMS. 43 Sébastien Laborie SMIL : Synchronized Multimedia Integration Language Les dérivés du langage SMIL Un exemple de code MMS 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: "><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= Sébastien Laborie SMIL : Synchronized Multimedia Integration Language

23 SVG Les dérivés du langage SMIL SVG - Animation Scalable Vector Graphics Réaliser des dessins vectoriels. L animation du dessin SVG est basée sur le module animation de SMIL : animate. animatemotion. Pas de langage de scripts pour animer la page. On manipule toujours du XML. 45 Sébastien Laborie SMIL : Synchronized Multimedia Integration Language Un exemple de SVG Les dérivés du langage SMIL SVG - Animation <svg width="500" height="500" xmlns=" <defs> <symbol id="cube" stroke="black" stroke-line-join="bevel" stroke-width="2"> <rect width="100" height="100" x="1" y="42" /> <polygon points="1,42 42,1 142,1 101,42 1,42" stroke-width="2" /> <polygon points="101,42 142,1 142, , ,42" /> </symbol> </defs> <use xlink:href="#cube" x="150" y="150"/> </svg> 46 Sébastien Laborie SMIL : Synchronized Multimedia Integration Language

24 Les dérivés du langage SMIL SVG - Animation Un exemple de SVG avec du SMIL <svg width="500" height="500" xmlns=" <defs> <symbol id="cube" stroke="black" stroke-line-join="bevel" stroke-width="2"> <rect width="100" height="100" x="1" y="42" /> <polygon points="1,42 42,1 142,1 101,42 1,42" stroke-width="2" /> <polygon points="101,42 142,1 142, , ,42" /> </symbol> </defs> <use xlink:href="#cube" x="150" y="150"> <animate attributename="y" dur="2s" values="150;140;130;140;150" /> </use> </svg> 47 Sébastien Laborie SMIL : Synchronized Multimedia Integration Language Les outils développés autour de SMIL Tables des matières 1 Introduction au langage SMIL Structure générale d un document multimédia SMIL Dimension spatiale Dimension contenu Dimension temporelle Dimension hypermédia 2 Autres fonctionnalités Les animations Adaptation au contexte Spécification de méta-données 3 Les dérivés du langage SMIL HTML+TIME puis Timesheets SMIL Timesheets MMS SVG - Animation 4 Les outils développés autour de SMIL Les éditeurs Les lecteurs 48 Sébastien Laborie SMIL : Synchronized Multimedia Integration Language

25 Les outils développés autour de SMIL Les éditeurs LimSee ( 49 Sébastien Laborie SMIL : Synchronized Multimedia Integration Language Les outils développés autour de SMIL Les éditeurs Adobe GoLive ( 50 Sébastien Laborie SMIL : Synchronized Multimedia Integration Language

26 Les outils développés autour de SMIL 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) 51 Sébastien Laborie SMIL : Synchronized Multimedia Integration Language Conclusion Conclusion et perspectives SMIL est un langage standard qui permet de spécifier des présentations multimédias Spécification des multiples dimensions des documents multimédia contenu, temporelle, spatiale et hypermédia animations, transitions... Spécifications de méta-données Utilisation de toutes les technologies XML (XPath, XSLT...) Développement de projets Open Source (Éditeur, Player) Un langage en évolution constante 52 Sébastien Laborie SMIL : Synchronized Multimedia Integration Language

27 Perspectives Conclusion et perspectives SMIL est un standard mais n est pas ou peu connu Des projets de recherche autour de ce langage sont en cours. Intégration au sein du langage HTML D autres formes du langage (SMIL Profiles) sont en élaboration. Des s décrits en SMIL L utilisation du langage sur diverses plates-formes se généralise. Télévision, Set-top boxes, lecteurs multimédia... Le langage est exploité dans l industrie (e.g., Adobe, Real). Windows Media Player, VLC Sébastien Laborie SMIL : Synchronized Multimedia Integration Language Questions? Questions Les slides sont disponibles sur le site suivant : 54 Sébastien Laborie SMIL : Synchronized Multimedia Integration Language