Les nouvelles applications multimédias sur le web avec HTML5 et SMIL

Équipe WAM

Une équipe de recherche qui s'intéresse au web pour :

• Trouver les bons modèles de représentation
• Expérimenter des outils (validation, édition)
• Contribuer aux standards

SMIL : Synchronous Multimedia Integration Language

Travail présenté ici : réalisé par Fabien Cazenave dans le cadre du projet ANR C2M

Le Web multimédia / HTML5

Les langages du web évoluent, avec HTML5, CSS3, SVG1.2 pour :

• rendre le web dynamique (contenu)
• animer les éléments (transitions, animations)
• intégrer des contenus multimédias (audio, vidéo)

...mais de plus en plus de code côté client
(pour gérer les synchronisations, les interactions utilisateur, ... )

Comment faire du web multimédia sans écrire une ligne de JavaScript?

SMIL Timing & Timesheets

• Un standard — une recommandation W3C —
  (un des douze modules de SMIL)
• qui définit un format déclaratif
• pour synchroniser des éléments XML
  (y compris HTML et SVG).
• Deux constructions de base :
  
  
  1. timeContainer= "par|seq|excl"
     définit un comportement temporel à tout "conteneur" de HTML/SVG
  2. timeAction = "display|visibility|class:[className]|style|intrinsic"
     définit comment un élément doit être activé / désactivé

Positionnement des standards

La librairie Timesheets.js

La librairie Timesheets.js permet de :

• Synchroniser des éléments HTML avec des contenus continus : annotation d'audio, présentations synchronisées.
• Mettre en place une navigation dans les flux basée sur le contenu : timeline enrichie, table des matières synchronisée.
• Offrir une riche palette d'interactions utilisateur.
  
• Et faciliter la réalisation d'extensions.
  

timeContainer="seq"

Un conteneur seq définit une séquence d'éléments dans laquelle les éléments jouent les uns après les autres.

1. first item
2. second item
3. third item
4. fourth item
5. last item

timeContainer="par"

Un conteneur par (pour parallèle) définit un groupement temporel dans lequel les éléments peuvent jouer en même temps.

1. first item
2. second item
3. third item
4. fourth item
5. last item

timeContainer="excl"

Comme le conteneur par, mais un seul descendant peut jouer à la fois.
Si un élément doit jouer alors qu'un autre est en train de jouer, ce dernier est arrêté.

1. first item
2. second item
3. third item
4. fourth item
5. last item

Event-Values

begin="[elementID].[event]"

click me

The quick brown fox jumps over the lazy dog.

click me

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Applications

• Animation temporelle de pages HTML
• Sous-titrage de vidéo
• Annotation d'audio
• Supports de présentation
• Graphiques animés et interactifs
• Web documentaires, exploitation d'archives
  http://wam.inrialpes.fr/timesheets/public/webRadio/
• Présentations enregistrées
  • Cours de l'ENS Lyon
  • Ubuntu-Party

Bannière circulaire

source: PortableLinuxApps.org

Sous-titrage de vidéo

source: mozilla.com

Annotation d'audio

source: apm.ircam.fr/page/audio-tag

While the three other instruments hold a cluster of high notes, the cellist’s silent gestures interact with them, provoking a windy sonority that becomes noisier as the cellist’s gestures become more energetic.

A short interlude employing conventional playing techniques (bows are applied on the strings in the usual way, though sounds are still high and dissonant).

A rich mixture of tremolos and glissandos at various speeds in the highest register. Each part of the quartet descends progressively into the medium register: a sound colour with greater solidity emerges.

The first violin plays high notes once again, this time “flautando” i.e. with a flute-like tone (by lightly bowing across the end of the fingerboard). The other instruments follow suit until a disparate mix of “flautando” and “sul ponticello” is established and enriched by granular synthesis from the electronics.

Louder notes and groups of notes irregularly irrupt, often using a “gettato” bow stroke: the player lets the bow freely rebound against the string-once or several times in a row like a ping pong ball.

From this point onward all the preceding techniques are increasingly varied and combined. Identifying them becomes more challenging. Good luck!

0:00 => 0:36 0:36 => 0:43 0:43 => 1:09 1:09 => 2:04 2:04 => 3:10 3:10 => 4:09

0:00

Applications

• Animation temporelle de pages HTML
• Sous-titrage de vidéo
• Annotation d'audio
• Supports de présentation
• Graphiques animés et interactifs
• Web documentaires, exploitation d'archives
  http://wam.inrialpes.fr/timesheets/public/webRadio/
• Présentations enregistrées
  • Cours de l'ENS Lyon
  • Ubuntu-Party

HTML5 MediaElement

Voir: wam.inrialpes.fr/timesheets/html5media

• Firefox, Chrome et Opera supportent les codecs libres :

  OGG/Vorbis, OGG/Theora, WebM/VP8

• IE9 et Safari supportent les codecs brevetés :

  MP3, AAC, MP4/H264

• IE6, IE7, IE8 ne supportent pas du tout HTML5 Media

  ⇒ Flash™

Solution: double encodage de tous les fichiers de média
et/ou utilisation d'une solution de repli utilisant MediaElement.js avec Flash™.

Les plus de cette approche

• Séparation du : contenu / présentation=CSS / animation=SMIL
  (voir la section “Timesheets” de notre site web).
• Solution multi-plate-forme, support pour l'accessibilité et la réutilisation.
• Gestion déclarative des interactions utilisateur
  ⇒ peu (voire aucun) code JavaScript à écrire .
• Utilisation extensible des événements DOM (onbegin/onend)
• Syntaxe stable : recommandation W3C
  (avec l'espoir de l'avoir un jour dans SVG2 ou HTML5 ?)
• Librairie JavaScript très légère (<10 KB)