à l Université Pierre et Marie Curie, le 16 février 2004 Maîtrise Polyvalente Internet et Multimédia Cours 2 : Documents multimédia Timur FRIEDMAN Document XML SMIL Plan
Plan Document Le document multimédia XML Structure et Synchronisation Normes et Outils SMIL Le document multimédia Contexte : web Un regroupement d objets : du texte des images de l audio et du vidéo en streaming des éléments interactifs
Les catégories d objet 1. Indépendant du temps, statique exemples : texte, image, dessin 2D, dessin 3D 2. Temporel, dynamique exemples : audio et vidéo 3. Interactif, statique ou dynamique exemples : liens, boutons, monde virtuel Les aspects de l objet Son identification URI XQLIRUP UHVRXUFH LGHQWLILHU (aussi URL) Son codification exemples : MPEG-2, texte permet de déterminer l outil nécessaire pour son traitement Son statut version, copyright
Les objets peuvent être agrégés Exemple d un objet monolithique : vidéo (avec audio stéréo intégré) Exemple des objets agrégés : transparents + audio en accompagnement «Digital Item» (un terme du norme MPEG-21) un agrégat d objets et de méta données Des objets au document A chaque agrégat d objet : sa mise en page (structure) son organisation temporel (synchronisation) Regroupement récursif d agrégats
Plan Document Le document multimédia XML Structure et Synchronisation Normes et Outils SMIL La structure d un document Spatiale positionnement des items les un par rapport aux autres Temporelle séquence d apparition et synchronisation, vitesse d apparition, point d arrêt, etc. Contrôle déclenchement d actions d un item sur un autre, pilotage
Structure spatiale Rendu du document sur l écran L écran divisé en régions Chaque région reçoit la structure d un document Le rendu est obtenu par multiplexage des objets dans les différentes régions Division en scènes Structure temporelle Chaque scène : L agencement d un ensemble d objets ou également de scènes Dans un référentiel (2D ou 3D) Représentation en arbre Une langue de type SGML
Grilles temporelles échelles de temps unités de cadencement Synchronisation Tops de synchronisation Exemple : un document audio sera topé pour faire apparaître une suite d images en accord avec un commentaire Plan Document Le document multimédia XML Structure et Synchronisation Normes et Outils SMIL
Normes SMIL 2.0 du World Wide Web Consortium (W3C) Voir http://www.w3.org/audiovideo/ MPEG-21 du Motion Pictures Experts Group Toujours en cours d élaboration Voir http://www.chiariglione.org/mpeg/ Autres : les normes de fait (grâce au marché) Exemples : WAP et WML pour les portables. DSM-CC pour la télévision à la demande Outils de visualisation Helix Player (open source, sauf les codecs) Voir https://player.helixcommunity.org/ Real Media Player Voir http://www.real.com Quicktime Voir http://www.apple.com/quicktime Macromedia Flash Voir http://www.macromedia.com/software/flashplayer/ Windows Media Player Voir http://www.microsoft.com/windows/windowsmedia/players.aspx
Outils de montage Encore réservé aux industriels du cinéma et de la télévision A terme une partie de ces techniques sera intégrée dans les logiciels d édition multimédia. Plan Document XML SMIL
Plan Document XML Introduction XML Schema XSL Stylesheets SMIL XML : Introduction XML = Extensible Markup Language Norme du W3C Une langue pour décrire les documents Conçue pour le web Un sous-ensemble de SGML Compromis entre : SGML : puissant et flexible, mais compliqué HTML : ciblé web, mais inflexible
Exemple d un poème Limitations de HTML <h1> Le dormeur du val (1870) </h1> <p> C est un trou de verdure où chante une rivière <br> Accrochant follement aux herbes des haillons <br> D'argent; où le soleil de la montagne fière, <br> Luit; C'est un petit val qui mousse de rayons. <p> Un soldat jeune bouche ouverte, tête nue, Une seule mise en page possible Exemple du même poème Flexibilité de XML <poème> <titre>le dormeur du val</titre> <année>1870</année> <strophe> <vers> C'est un trou de verdure où chante une rivière </vers> <vers> Accrochant follement aux herbes des haillons </vers> <vers> D'argent; où le soleil de la montagne fière, </vers> <vers> Luit; C'est un petit val qui mousse de rayons. </vers> </strophe> <strophe> <vers> Un soldat jeune bouche ouverte, tête nue, </vers> Description du contenu : plusieurs mises en page possibles
Séparation de contenu et de forme Description du contenu : le document XML suivant un XML Schema Description de la forme : un document XSL (([WHQVLEOH6W\OHVKHHW /DQJXDJH) mise en forme par un processeur XSLT (;6/7UDQVIRUPDWLRQV) Document XML Introduction XML Schema XSL Stylesheets SMIL Plan
Le XML Schema Description du syntaxe du document les balises et attributs possibles leur hiérarchie, les types de données, etc. (Pour ceux qui connaissent les DTDs : le XML Schema est le successeur du DTD) Un document conforme au XML Schema est YDOLGH Exemple d'un XML Schéma XML Schema (extrait) <xsd:complextype name="adresse"> <xsd:sequence> <xsd:element name="numero" type="xsd:decimal"/> <xsd:element name="rue" type="xsd:string"/> <xsd:element name="codepostal" type="xsd:decimal"/> <xsd:element name="ville" type="xsd:string"/> </xsd:sequence> </xsd:complextype> Document XML valide suivant ce schéma (extrait) <adresse> <numero>4</numero> <rue>place Jussieu</rue> <codepostal>75005</codepostal> <ville>paris</ville> </adresse>
Plan Document XML Introduction XML Schema XSL Stylesheets SMIL XSL Stylesheets Description de la mise en forme des documents Spécifique à un XML Schema Transformation du document XML en XHTML (Pour ceux qui connaissent les CSS : les XSL Stylesheets sont les successeurs des CSS)
Exemple d un XSL Stylesheet Créer une table des noms des rues et des villes : <xsl:template match="/"> <html> <body> <h2>les rues</h2> <table border="1"> <tr bgcolor="#9acd32"> <th align="left">rue</th> <th align="left">ville</th> </tr> <xsl:for-each select="adresse"> <tr> <td><xsl:value-of select="rue"/></td> <td><xsl:value-of select="ville"/></td> </tr> </xsl:for-each> </table> </body> </html> </xsl:template> XSLT Transformations effectués suivant des règles Règles définis avec gabarits (WHPSODWHV) Exemple : <xsl:template match="/"> le modèle s'assortit à la racine du document on écrit le gabarit correspondant
XSLT bis Exemple : <xsl:for-each select="adresse"> permet de boucler en sélectionnant chaque élément qui correspond Exemple : <xsl:value-of select="rue"/> on sélectionne et on écrit l'élément correspondant Document XML SMIL Plan
Le format SMIL SMIL: Synchronized Multimedia Integration Language proposé par le W3C (http://www.w3.org/audiovideo/) basé sur XML Description d objets média de leur placement géométrique et temporel quelques éléments d interactivité Pas d une qualité professionnelle Donne une idée, adapté pour la simulation Syntaxe XML, avec balises ouvrantes et fermantes Extensions des noms de fichier sont.smi ou.smil Fichier commence par <smil> et fini par </smil> Balises et les attributs écrits en minuscules Les caractères spéciaux sont codés Il n'y a pas de balise vide Commentaires encadrés par <!-- -->
<smil> Balise qui déclare début et fin du document SMIL Il est constitué de deux parties head : information structurelle sur le document représenté body : corps du texte formé de séquences <smil id="exemple"> <head>[---]</head> <body>[---]</body> </smil> <head> Balise du paragraphe d entête Contient les parties suivantes : id : Identification du document. meta : Propriétés de la présentation layout : Structure géométrique de la présentation switch : Proposition de choix à l'utilisateur <head id="code" meta name="code" content="code"/> <meta name="title" content="wdvl Demo" /> <layout>[---]</layout> <switch>[---]</switch> </head>
<switch> Configuration automatique Bande passante. Exemple : <switch> <audio src="foo1" system-bandwidth="56000" /> <audio src="foo2" system-bandwidth="28800" /> <audio src="foo3" /> </switch> Codage média. Exemple : <switch> <video src="foo.rm" /> <video src="foo.mpg /> </switch> Exemples de SMIL Introduction de Philipp Hoschka <layout> Mise en page <layout> <region id="foo" top="50" left="50"/> </layout>... <video region="foo" src="joe-video" />... Exemple de SMIL Introduction de Philipp Hoschka
<body> Balise du paragraphe de corps du document Description des objets à visualiser sous forme de paragraphes séquentiels ou parallèles <body> <switch>[---]</switch> <seq>[---]</seq> </body> Les média Balise <animation/> <audio/> <img/> <ref/> <text/> <textstream/> <video/> Utilisé pour Fichiers animés, par exemple "Flash" (.swf) Fichiers audio, par exemple WAVE (.wav) ou RealAudio (.rm) JPEG (.jpg), GIF (.gif) ou PNG (.png) Fichiers qui ne peut pas être classifier par d'autres balises Fichiers texte statique (.txt) Fichiers avec du text animés, par exemple RealText (.rt) Fichiers video, par exemple MPEG (.mpg) ou RealVideo (.rm) Transparent de SMIL Introduction de Philipp Hoschka
<seq> Lecture séquentielle Eléments multimédias affichés les uns après les autres <seq> <img id="a" dur="6s" begin="0s" src="..." /> <img id="b" dur="4s" begin="0s" src="..." /> <img id="c" dur="5s" begin="2s" src="..." /> </seq> Exemple et image du SMIL Overview de Rick C.A. Bulterman <par> Lecture parallèle Eléments multimédias sont exécutées en même temps <par> <img id="a" dur="6s" begin="0s" src="..."/> <img id="b" dur="4s" begin="0s" src="..."/> <img id="c" dur="5s" begin="2s" src="..."/> </par> Exemple et image du SMIL Overview de Rick C.A. Bulterman
<excl> Lecture exclusive (nouveau dans SMIL 2.0) Seulement une élément multimédia est exécutée <excl> <img id="a" dur="6s" src="..." begin="0s;x.activateevent" /> <img id="b" dur="4s" src="..." begin="y.activateevent" /> <img id="c" dur="5s" src="..." begin="z.activateevent" /> </excl> Exemple et image du SMIL Overview de Rick C.A. Bulterman Emboîtement Un corps de séquence peu contenir un paragraphe de parallélisation et vice et versa <seq> <par> [---] </par> <par> [---] </par> </seq> (Egalement avec <excl>)
Exemple <seq> <par> <video src="video1.avi"> <video src="video2.avi"> </par> <video src="video3.avi"> </seq> Deux phases (l'une après l'autre) : 1. Deux vidéos (video1.avi et video2.avi) lues en même temps On attend la fin de la plus longue des deux 2. Une vidéo (video3.avi) jouée Option dur durée inhérente <audio src="x.rm" /> durée simple <audio src="x.rm" dur="6s" /> durée active <audio src="x.rm" dur="6s" repeatcount="2" /> durée rendue <audio src="x.rm" dur="6s" repeatcount="2" fill="freeze" /> Exemple et image du SMIL Overview de Rick C.A. Bulterman
Options Option abstract author begin copyright dur end endsync id region repeat Description Brève description du contenu Nom de l'auteur Spécifie un délai Droits d'auteur Durée d'affichage Stoppe l'affichage Détermine la fin implicite de <par> Identificateur interne unique Situation de l'élément Répétition d'un objet Options bis Option system-bitrate system-caption system-language system-overdub-or-caption system-required system-screen-size system-screen-depth title Description Contrôle le taux de transmission Ignoré si l'utilisateur ne veut pas de sous-titre Adaptation de la langue Sous-titrage ou non Reconnaissance ou non d'une extension Spécifie la taille minimale de l'écran Spécifie la résolution minimale Titre de la fenêtre