smil - 139Kb

Transcription

smil - 139Kb

SMIL
SMIL
• Pour quoi
– langage de description de présentatio n multimédia
• Par qui
Synchronized Multimedia Integration
Language
– W 3C
par Yv es Bek k ers
• Quand
– P remière version juin 98
SMIL - Yv es bekk ers - IFSIC
1
Objectifs de conception
2
Objectif à venir
• La synchro nisatio n de média
– sur le WEB
– Position dans l’espace
– Position dans le temps
– Prendre en compte les contraintes réseau …
• L’interactivité : liens
• Intégration de smil dans
– xhtml
– svg
• Fo rmat textuel : xml
• Intégration : co mb iner des resso urces d e type
différent
3
4
SMIL un dialecte XML
Comment visualiser du SMIL
<?xml version="1. 0" encoding="iso-8859-1"?>
<!DOCTYPE smil PUBLIC "-//W3C//DTD SMIL 1.0//EN"
"http://www.w3.org/TR/REC-smil/SMIL10.dtd">
• Realplayer 8
– http://www.real .co m/realo ne/ plus/in de x.html ?la
ng= en&lo c= us
5
<smil>
<head>
<meta name= "nom" content= "contenu"/>
<layout>
...
</layout>
</head>
<body>
...
</body>
</smil>
6
1
Deux parties principales
Élément <root-layout>
• Élément <layout> contient
• Description de la fenêtre principale
– une description de la fenêtre principale (élément
<root-layout>)
– ses dimensions (en pixels)
– la couleur de fond
– pour chacune des régio ns de la présentation, sa
position, sa taille et une identification unique
(élément <region>)
• Exemple
<root-layout width="300" height="200"
background-color="white" />
• Élément <body> contient
– Une descriptio n de chacun des média présentés
7
Élément <region>
8
Positionnement d’une région
• Description d’une région
– son id entification : attribut id
• Position absolue (en nombre de pixels)
– sa p o sition : attributs left et top
– left= "75 " top= "50 "
– ses d imen sions : attributs width et height
• Position relative (en % de la taille de la
• Exemple
<region id="vim_icon" left="75" top="50"
width="32" height="32" />
• Chaque média visuel doit avoir une région
associée
fenêtre principale)
– left= "50% " top= "40% "
9
10
Ajuster un média à sa région
Recouvrement de deux régions
• Attribut fit
• Deux régions peuvent se recouvrir
– fit="fill" s’étendre dans la sous fenêtre
– L’attribut z-index donne le niveau
– La régio n dont le z-index est le plus grand est
au dessus
• Exemple
<region id="bullet6" title="marque6" left="10"
top="540" width="14" height="14"
z-index="4" />
11
– fit="meet" s’étendre sans déformation en
remplissant une seule dimension
– fit="slice" s’étendre sans déformation en
remplissant tout l’espace
– fit="scroll" mettre un (des) ascenseur(s)
• Exemple
< region id= "vi m_icon" left= "75 " top= "50 "
width= "32 " height= "32 " fit= "scroll " />
12
2
Élément <body>
• Synchronisation de média
L’espace
Le temps
movie1.rm
4s
img.gif
audio1 5s
audio2
On peut créer une séquence avec un élément <par>
<par>
<img region="r" begin="0s" src="img1.gif" dur="4s"/>
</par>
<body>
<par>
<video region="r1 " src="movie1.rm" />
<img region="r2 " begin="4s " src="img.gif " />
<seq>
<audio src="audio1.wav " />
<audio begin="5s" src="audio2.mp3" />
</seq>
</par>
</body>
Faire une séquence avec <par>
M ais il est préférable d'employer un élément <seq>
<seq>
<img region="r" src="img1.gif" dur="4s"/>
</seq>
13
14
Type de média acceptés par
RealPlayer
Synchronisation de média
<par>
<audio begin="5s " src="audio2. mp3 " />
</par>
Ty pe de média
Im ag e gif, jpeg
M icrosoft wav, mp3 ,
Sun Aud io,
Sun Aud io Zipped
Texte sim ple
Real movie, AVI,
– mise en séquence
élément
<img>
<audio>
<text>
<video>
MPEG, MOV
15
Les média
16
Attributs dur et fill
• Positionnement d’un média
• Définir une durée au sein d’une séquence
< img region= "r2 " begin= "4s " src= "img.gif " />
média
où
quand
<seq>
<img src="image1.jpg " region="photo " dur="22s "/>
<text src="image2.gif " region="sousT itre " dur="6s"/>
<img src="image3.jpg " region="photo " dur="7s" />
</seq>
quoi
• Les média
• Figer une image pour toute la durée de la
présentation
< txt regio n= "r1 " src= "titre.txt " />
< img region= "r2 " begin= "4 s " src= "img.gif " />
<img src="image1.jpg" region="photo " fill="freeze "/>
< video region= "r3 " begin= "4s " src= "film.rm " />
< audio begin= "4s " src= "so n.mp3 " />
17
18
3
Naviguer dans le temps, élément <A>
Valeurs d’horloge
• Valeur d’horloge
• Définition d’une cible : attribut id
<img src="image.jpg" region="photo" dur="8s"
id="diapo5"/>
– 02:33:45 2h 33 mn 45s
– 45:24
45 mn 24 s
– 02:00.24 2mn 0 ,2 4 s
• Valeur décimale
• Définition d’un lien : élément <A>
– 1.24s 1,24 secondes
<a href="#diapo5">
<text src="texte/melanger.txt" region="r5"/>
</a>
– 12.6h 12 ,6 heures
– Unités : { h, min, s, ms} s par défaut
19
20
Les éditeurs
Conclusion
• Smil Co mpo ser
– http://real8.free.fr/log/smilinst.exe
• Un outil pour cours et conférences sur le WEB
• SMIL permet de
– placer des média dans l’espace (3 dim)
• RealSlideshow
– http://www.realnetworks.com/products/s lideshow/index. h
tml?src=invkey&mcc=invkey
• Grins
– synchroniser des média dans le temps
– http://www.oratrix.com/GR iNS/
• TagFree SM IL Editor
– naviguer dans le temps
– http://www.tagfree.co.kr/
• P rojet OP ERA
– http://opera.inrialpes.fr/
21
22
En savoir plus sur SMIL
Les lecteurs
• SM IL au W 3C
• Real One
http://www.real .com/realone/in de x.html ?lang= fr&loc= fr
– http://www.w3.o rg/ TR/ R EC - smil/
• SM IL au CW I
• Quicktime 6
– http://www.c wi .nl/ ~me dia/ SM IL/
http://www.apple.co m/fr/quic ktime/do wnlo ad/
• Le site de Real
• Grins ( 95$ pour PC)
– http://www.real .co m/
http://www.oratri x.com/ GRi N S/
• HPAS applet (last modified 6/4/98)
• Cours de DIDIER co urtaud au CEA, déc. 9 8
http://www.research .compaq.co m/src/HP AS/ applet/
– http://www.e uroclid.fr/Cours_ SM IL_W 3C/ pl an.ht m
23
24
4

smil - 139Kb

Transcription

Documents pareils

Web sémantique et intelligence artificielle

DUT SRC - Webchronique

Papel Bolsas - J.Vilaseca SA

CV résumé Acteur

IUT Antenne de la Faculté de Droit

colorado s3 src

ibiza s1p src

BOTTE JALFRIGG SAS S3 CI SRC P45 (Ref: JAL025) page 1

buffalo s3 src

7.3.2.3 - PRSE-PACA

Langages de publication temporalisée