Upload
others
View
11
Download
0
Embed Size (px)
Citation preview
Creer un document multimedia avec SMIL
Sebastien Laborie
[email protected]://slaborie.perso.univ-pau.fr
1 Sebastien Laborie Creer un document multimedia avec SMIL
XML : eXtensible Markup LanguageQuelques rappels essentiels
Sebastien Laborie
2 Sebastien Laborie XML : eXtensible Markup Language
Le contexte : structurer/traiter/echanger des donnees
requete
requete
requete
requete transformation
transformation
transformation
transformation
requete
WWW
Necessite de definir un langage structure (semi-structure) et extensible.
Necessite de prendre en compte la diversite des informations echangees.
3 Sebastien Laborie XML : eXtensible Markup Language
XML
Document XML
Composes d’unites de stockage appelees entites.
Ces donnees sont soit des donnees simples soit des donnees concourant aumarquage (balisage).
Le balisage permet de decrire la structure logique du document.
Validation d’un document XML
Un document XML est “bien forme” s’il respecte les regles de XML.
XML fournit un mecanisme pour contraindre les structures, les DTD(Definition de Type de Document).
Un document XML peut etre “valide” par rapport a une ou plusieurs DTD.
4 Sebastien Laborie 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 Sebastien Laborie XML : eXtensible Markup Language
L’arbre XML
carnetDeContact
contact contact
adresse url logo tel tel
lignesAdresse codePostal ville
ligne ligne ligne
6 Sebastien Laborie XML : eXtensible Markup Language
Question ?
Quel langage XML connaissez-vous ?
7 Sebastien Laborie XML : eXtensible Markup Language
Les standards du W3C bases sur XML
8 Sebastien Laborie XML : eXtensible Markup Language
SMIL : Synchronized Multimedia Integration LanguageUne introduction au langage
Sebastien Laborie
9 Sebastien Laborie SMIL : Synchronized Multimedia Integration Language
Introduction
Un exemple de document multimedia
Synchronisation Affichage Interactivite
10 Sebastien Laborie SMIL : Synchronized Multimedia Integration Language
Introduction
Le contexte
Pourquoi utiliser le langage SMIL ?
D’autres langages de specification de documents multimedia :
Flash
Javascript
. . .
SMIL est une recommandation du W3C (un “standard”)
format ouvert defini par RealNetworks, Macromedia, Intel, IBM, Microsoft,Panasonic, Sony, Nokia, Philips, INRIA, CWI. . .
DTD XML =⇒ Interoperabilite
Utilisation de toutes les technologies XML (XQuery, XPath, XSLT. . .)
Beaucoup de projets Open Source autour des standards (Editeurs, Players. . .)
Un langage en evolution constante.
11 Sebastien Laborie SMIL : Synchronized Multimedia Integration Language
Introduction
L’histoire de SMIL
1996 : W3C Workshop
1997 : Premiere reunion du groupe de travail SYMM
1998 : La recommandation SMIL 1.0 est nee
Synchronisation et placement visuel d’objets multimediaInteractiviteCapacite d’adaptation a differents contextes
2001 : SMIL 2.0
AnimationMeta-donnees
2005 : SMIL 2.1
Effets de transitionsExecution multi plates-formes (SMIL profiles)
2008 : SMIL 3.0
Outils supplementaires de structure et de controle de la presentation
12 Sebastien Laborie SMIL : Synchronized Multimedia Integration Language
Introduction
Tables des matieres
1 Introduction au langage SMILStructure generale d’un document multimedia SMILDimension spatialeDimension contenuDimension temporelleDimension hypermedia
2 Autres fonctionnalitesLes animationsAdaptation au contexteSpecification de meta-donnees
3 Les derives du langage SMILHTML+TIME puis TimesheetsSMIL TimesheetsMMSSVG - Animation
4 Les outils developpes autour de SMILLes editeursLes lecteurs
13 Sebastien Laborie SMIL : Synchronized Multimedia Integration Language
Introduction au langage SMIL
Tables des matieres
1 Introduction au langage SMILStructure generale d’un document multimedia SMILDimension spatialeDimension contenuDimension temporelleDimension hypermedia
2 Autres fonctionnalitesLes animationsAdaptation au contexteSpecification de meta-donnees
3 Les derives du langage SMILHTML+TIME puis TimesheetsSMIL TimesheetsMMSSVG - Animation
4 Les outils developpes autour de SMILLes editeursLes lecteurs
14 Sebastien Laborie SMIL : Synchronized Multimedia Integration Language
Introduction au langage SMIL Structure generale d’un document multimedia SMIL
La structure generale d’un document multimedia SMIL
<head>
...
</head>
Specifications de l’affichage,
des meta-donnees et des transitions
<smil>
<body>
...
</body>
</smil>
Synchronisation des objets multimedia,
Specification des informations hypermedia
15 Sebastien Laborie SMIL : Synchronized Multimedia Integration Language
Introduction au langage SMIL Dimension spatiale
Specification des zones d’affichage
x
yRegion englobante
Region 1 Region 2 Region 3
Region 4 . . .
16 Sebastien Laborie SMIL : Synchronized Multimedia Integration Language
Introduction au langage SMIL Dimension spatiale
Specification 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 Sebastien Laborie SMIL : Synchronized Multimedia Integration Language
Introduction au langage SMIL Dimension spatiale
Exercice : Specifier cette organisation spatiale en SMIL
region1500
600
(0,0) region2
region3(200,150)
650region4 region5(570,200)
18 Sebastien Laborie SMIL : Synchronized Multimedia Integration Language
Introduction au langage SMIL Dimension contenu
Le corps d’un document multimedia SMIL
<body>
...
</body>
Synchronisation des objets multimedia,
Specification des informations hypermedia
<smil>
</smil>
<head>
...
</head>
Specifications de l’affichage,
des meta-donnees et des animations
19 Sebastien Laborie SMIL : Synchronized Multimedia Integration Language
Introduction au langage SMIL Dimension contenu
Le corps d’un document multimedia SMIL
20 Sebastien Laborie SMIL : Synchronized Multimedia Integration Language
Introduction au langage SMIL Dimension contenu
Specification des objets multimedia
Audio :
<audio id="..." src="..." begin="..." dur="..." end="..." />
Video :
<video id="..." src="..." begin="..." dur="..." />
Texte :
<text id="..." src="..." region="..." />
Image :
<img id="..." src="..." region="..." fit="fill" />
21 Sebastien Laborie SMIL : Synchronized Multimedia Integration Language
Introduction au langage SMIL Dimension temporelle
Specification de la timeline de la presentation
Certains elements sont joues en “parallele”.
Certains elements sont joues en “sequence”.
Publicite Titre
Video
Recette
0s 5s 2m 11s
22 Sebastien Laborie SMIL : Synchronized Multimedia Integration Language
Introduction au langage SMIL Dimension temporelle
Specification 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 Sebastien Laborie SMIL : Synchronized Multimedia Integration Language
Introduction au langage SMIL Dimension temporelle
Exercice : Specifier cette organisation temporelle en SMIL
Imageirit.jpg
Imagecarte.jpg
Textesous-titrage.rt
Videopresentation.avi
Musiquemusic.mp3
0s 5s 20s 95s
24 Sebastien Laborie SMIL : Synchronized Multimedia Integration Language
Introduction au langage SMIL Dimension hypermedia
Specification de liens hypermedia
Definition
Liens hypermedia
Interne : permet de naviguer a l’interieur d’une meme presentation.
Externe : permet de naviguer vers d’autres presentations.
PubliciteTitre
Video
Recette
l1
Autre document0s 5s 2m 11s
25 Sebastien Laborie SMIL : Synchronized Multimedia Integration Language
Introduction au langage SMIL Dimension hypermedia
Specification de liens hypermedia en SMIL
<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>
26 Sebastien Laborie SMIL : Synchronized Multimedia Integration Language
Autres fonctionnalites
Tables des matieres
1 Introduction au langage SMILStructure generale d’un document multimedia SMILDimension spatialeDimension contenuDimension temporelleDimension hypermedia
2 Autres fonctionnalitesLes animationsAdaptation au contexteSpecification de meta-donnees
3 Les derives du langage SMILHTML+TIME puis TimesheetsSMIL TimesheetsMMSSVG - Animation
4 Les outils developpes autour de SMILLes editeursLes lecteurs
27 Sebastien Laborie SMIL : Synchronized Multimedia Integration Language
Autres fonctionnalites Les animations
Les animations
Definition (animation)
L’animation consiste a donner l’illusion d’un mouvement a l’aide d’une suited’images.
Examples d’animation
Mouvement d’un ensemble d’objets
TranslationRotation
Modification de l’apparence d’un objet
Modification de tailleChangement de couleurs
28 Sebastien Laborie SMIL : Synchronized Multimedia Integration Language
Autres fonctionnalites Les animations
Les animations en SMIL
Specification d’une animation
Une animation en SMIL se decrit dans la specification d’un objet multimedia.
Declaration 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 Sebastien Laborie SMIL : Synchronized Multimedia Integration Language
Autres fonctionnalites Les animations
Les effets de transition
Definition (effets de transitions)
Les effets de transition sont des animations particulieres qui se deroulent au debutou a la fin de la presentation d’un ensemble d’objets multimedia.
Plusieurs types d’effets de transition
Fondu-enchaıne
Apparition ou disparition (e.g., sous forme d’etoile)
. . .
30 Sebastien Laborie SMIL : Synchronized Multimedia Integration Language
Autres fonctionnalites Les animations
Les effets de transition en SMIL
Specification des effets de transition
Les effets de transition en SMIL se declarent dans l’entete head du document.
Declaration 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 Sebastien Laborie SMIL : Synchronized Multimedia Integration Language
Autres fonctionnalites Les animations
Exercice : Specifier des animations et des transitions
Inverser image 1 et image 2 en les faisant se croiser en meme temps
Faire disparaıtre l’image de fond en etoile apres l’inversion
Image de fond(200,150)
650Image 1 Image 2(570,200)
32 Sebastien Laborie SMIL : Synchronized Multimedia Integration Language
Autres fonctionnalites Adaptation au contexte
Adaptation de documents multimedia
Profil1 Profil2 Profil3
Adaptation
33 Sebastien Laborie SMIL : Synchronized Multimedia Integration Language
Autres fonctionnalites Adaptation au contexte
Specification 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>
...
34 Sebastien Laborie SMIL : Synchronized Multimedia Integration Language
Autres fonctionnalites Specification de meta-donnees
Specification de meta-donnees simples
Definition (meta-donnee simple)
Une meta-donnee simple est une description textuelle d’une donnee.
Des exemples de meta-donnees simples
L’auteur du document.
La date de creation du document.
L’editeur
Les droits
. . .
35 Sebastien Laborie SMIL : Synchronized Multimedia Integration Language
Autres fonctionnalites Specification de meta-donnees
Specification de meta-donnees simple en SMIL
<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>
36 Sebastien Laborie SMIL : Synchronized Multimedia Integration Language
Autres fonctionnalites Specification de meta-donnees
Recherche d’une meta-donnee simple
Requete : cherchez les noms des auteurs du document SMIL
Utilisation XQuery
for $x in doc(”cremeAnglaise.smil”)/smil/head/meta[@name=”Author”]return $x/@contentsorted by @content
Reponse
Florence SedesSebastien Laborie
37 Sebastien Laborie SMIL : Synchronized Multimedia Integration Language
Les derives du langage SMIL
Tables des matieres
1 Introduction au langage SMILStructure generale d’un document multimedia SMILDimension spatialeDimension contenuDimension temporelleDimension hypermedia
2 Autres fonctionnalitesLes animationsAdaptation au contexteSpecification de meta-donnees
3 Les derives du langage SMILHTML+TIME puis TimesheetsSMIL TimesheetsMMSSVG - Animation
4 Les outils developpes autour de SMILLes editeursLes lecteurs
38 Sebastien Laborie SMIL : Synchronized Multimedia Integration Language
Les derives du langage SMIL HTML+TIME puis Timesheets
HTML+TIME (1998)
Timed Interactive Multimedia Extensions for HTML
Ajoute une dimension temporelle aux pages web.
Base sur le module temporel de SMIL :
Synchronisation des contenus multimedia.Utilisation des conteneurs temporels.Permet la specification 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 Sebastien Laborie SMIL : Synchronized Multimedia Integration Language
Les derives du langage SMIL HTML+TIME puis Timesheets
Un exemple de code HTML+TIME
Source : http ://www.ludicrum.org/demos/SMILTimingForTheWeb-Demos.html (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 Sebastien Laborie SMIL : Synchronized Multimedia Integration Language
Les derives du langage SMIL SMIL Timesheets
SMIL Timesheets (2008)
Ajoute une dimension temporelle aux pages web.
Implementation en Javascript du module temporel de SMIL.
Permet de specifier des feuilles de style temporelles.
Fonctionne sur de nombreux navigateurs.
41 Sebastien Laborie SMIL : Synchronized Multimedia Integration Language
Les derives du langage SMIL SMIL Timesheets
Exemple de 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 Sebastien Laborie SMIL : Synchronized Multimedia Integration Language
Les derives du langage SMIL MMS
MMS
Multimedia Messaging Service
Envoyer des messages multimedia entre plates-formes mobiles.
Base sur le langage SMIL :
Synchronisation des contenus multimedia.Placement visuel des contenus multimedia.Interactivite.
La specification de la presentation est peu volumineuse.
Les contenus sont encodes dans le document MMS.
43 Sebastien Laborie SMIL : Synchronized Multimedia Integration Language
Les derives du langage SMIL MMS
Un exemple de code MMSstart="<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=
...
44 Sebastien Laborie SMIL : Synchronized Multimedia Integration Language
Les derives du langage SMIL SVG - Animation
SVG
Scalable Vector Graphics
Realiser des dessins vectoriels.
L’animation du dessin SVG est basee sur le module animation de SMIL :
animate.animateMotion.
Pas de langage de scripts pour animer la page.
On manipule toujours du XML.
45 Sebastien Laborie SMIL : Synchronized Multimedia Integration Language
Les derives du langage SMIL SVG - Animation
Un exemple de SVG
<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg">
<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,101 101,142 101,42" />
</symbol>
</defs>
<use xlink:href="#cube" x="150" y="150"/>
</svg>
46 Sebastien Laborie SMIL : Synchronized Multimedia Integration Language
Les derives du langage SMIL SVG - Animation
Un exemple de SVG avec du SMIL
<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg">
<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,101 101,142 101,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 Sebastien Laborie SMIL : Synchronized Multimedia Integration Language
Les outils developpes autour de SMIL
Tables des matieres
1 Introduction au langage SMILStructure generale d’un document multimedia SMILDimension spatialeDimension contenuDimension temporelleDimension hypermedia
2 Autres fonctionnalitesLes animationsAdaptation au contexteSpecification de meta-donnees
3 Les derives du langage SMILHTML+TIME puis TimesheetsSMIL TimesheetsMMSSVG - Animation
4 Les outils developpes autour de SMILLes editeursLes lecteurs
48 Sebastien Laborie SMIL : Synchronized Multimedia Integration Language
Les outils developpes autour de SMIL Les editeurs
LimSee (http://limsee2.gforge.inria.fr)
49 Sebastien Laborie SMIL : Synchronized Multimedia Integration Language
Les outils developpes autour de SMIL Les editeurs
Adobe GoLive (http://www.adobe.com)
50 Sebastien Laborie SMIL : Synchronized Multimedia Integration Language
Les outils developpes 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 Sebastien Laborie SMIL : Synchronized Multimedia Integration Language
Conclusion et perspectives
Conclusion
SMIL est un langage standard qui permet de specifier despresentations multimedias
Specification des multiples dimensions des documents multimedia
contenu, temporelle, spatiale et hypermediaanimations, transitions. . .
Specifications de meta-donnees
Utilisation de toutes les technologies XML (XPath, XSLT. . .)
Developpement de projets Open Source (Editeur, Player)
Un langage en evolution constante
52 Sebastien Laborie SMIL : Synchronized Multimedia Integration Language
Conclusion et perspectives
Perspectives
SMIL est un standard mais n’est pas ou peu connu
Des projets de recherche autour de ce langage sont en cours.
Integration au sein du langage HTML
D’autres formes du langage (SMIL Profiles) sont en elaboration.
Des e-mails decrits en SMIL
L’utilisation du langage sur diverses plates-formes se generalise.
Television, Set-top boxes, lecteurs multimedia. . .
Le langage est exploite dans l’industrie (e.g., Adobe, Real).
Windows Media Player, VLC. . .
53 Sebastien Laborie SMIL : Synchronized Multimedia Integration Language
Questions
Questions ?
Les slides sont disponibles sur le site suivant :
http://slaborie.perso.univ-pau.fr
54 Sebastien Laborie SMIL : Synchronized Multimedia Integration Language