Créer un document multimédia avec SMIL

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

http://slaborie.perso.univ-pau.fr

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.


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.


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>


L’arbre XML

carnetDeContact

contact contact

adresse url logo tel tel

lignesAdresse codePostal ville

ligne ligne ligne


http://www.iutbayonne.univ-pau.fr

http://www.iutbayonne.univ-pau.fr/logo.jpg

Question ?

Quel langage XML connaissez-vous ?


Les standards du W3C bases sur XML


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


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.


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


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


Introduction au langage SMIL

Tables des matieres






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


Introduction au langage SMIL Dimension spatiale

Specification des zones d’affichage

x

yRegion englobante

Region 1 Region 2 Region 3

Region 4 . . .



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>



Exercice : Specifier cette organisation spatiale en SMIL

region1500

600

(0,0) region2

region3(200,150)

650region4 region5(570,200)


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



Le corps d’un document multimedia SMIL



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


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



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>



Exercice : Specifier cette organisation temporelle en SMIL

Imageirit.jpg

Imagecarte.jpg

Textesous-titrage.rt

Videopresentation.avi

Musiquemusic.mp3

0s 5s 20s 95s


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


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>


http://www.pub.com

Autres fonctionnalites

Tables des matieres






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



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


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)

. . .



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>



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)


Autres fonctionnalites Adaptation au contexte

Adaptation de documents multimedia

Profil1 Profil2 Profil3

Adaptation


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>

...


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

. . .



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>



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


Les derives du langage SMIL

Tables des matieres






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.


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>


t:par

t:audio

class:highlight

class:highlight

class:highlight

class:highlight

t:par

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.


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>


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.


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=

...


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.



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>



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>


Les outils developpes autour de SMIL

Tables des matieres






Les outils developpes autour de SMIL Les editeurs

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


Les outils developpes autour de SMIL Les editeurs

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


http://limsee2.gforge.inria.fr

http://www.adobe.com

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)


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


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


Questions

Questions ?

Les slides sont disponibles sur le site suivant :




Documents

Créer un document multimédia avec SMIL