4 février 2011 - Version 1.1

Fabien Cazenave (INRIA) et Cécile Roisin (UPMF-INRIA) - Équipe WAM, INRIA Rhône-Alpes

Moteur d'édition et de publication HTML

de contenus Webradio orienté

"esthétique"

PROJET C2M

SOMMAIRE

I Introduction..................................................................................4

II Objectifs et critères pour la réalisation d'un player multimédia 5

III SMIL-Timesheets : réalisation d'un lecteur multimédia intégré aux navigateurs................................................................................6

IV timeController.js : composant de waveform et ligne de temps sémantiquement enrichie................................................................8

V Premiers résultats de publication Webradio...............................9

1 Bilan et suite des études et réalisations...............................................................11

Annexes........................................................................................12

C2M 3

I INTRODUCTION

Parmi les verrous et innovations listés dans le document décrivant le projet C2M, ce rapport décrit les travaux correspondant principalement au « Verrou 2 : Écriture WYSIWYM multimédia et écriture spontanée » et à l' « Innovation 2b : Modèle d'édition multimédia collaboratif ». Plus précisément :

la définition de gabarits : étendre les définitions de gabarits au multimédia structuré.→ cas du composant timeline structurée permettant la réalisation de services de navigation temporelle sémantique.

Le choix des formats de représentation : les standards de ce domaine (SMIL, XMT, HTML+Timesheets) permettent de mettre en œuvre cette approche comme dans les outils Amaya et LimSee3.→ opportunité de HTML5… adaptation et extension de l'expérience Timesheets faite dans Limsee3

La réponse aux besoins terrain de l'INA : cas de la Webradio

Ces travaux sont développés avec comme objectif concret la production automatisée de documents multimédia dans le cadre de la chaîne de production de Webradio.

Plan du rapport

Avant de décrire la solution mise en place pour réaliser la publication Webradio, nous décrirons les principes qui sous-tendent à l'approche choisie, puis le moteur de rendu HTML5 + Timesheets et les composants qui y ont été ajoutés.

1. Critères2. Réalisation d'un lecteur multimédia intégré aux navigateurs3. Définition de composants : waveform, ligne de temps sémantiquement enrichie («

timeline segmentée »)4. Premiers résultats de publication Webradio

C2M 4

II OBJECTIFS ET CRITÈRES POUR LA RÉALISATION D'UN PLAYER MULTIMÉDIA

1. Structuration : sémantique des contenus et de la navigation2. Accessibilité : contenus alternatifs, feuilles de style qui peuvent tirer parti du

format déclaratif3. Référencement : contenu textuel, balises sémantiques (h1, h2, nav), navigation

temporelle4. Réutilisation :

Des contenus, tant média (ressources externes) que documents (structures) Des feuilles de style tant spatiales (CSS) que temporelles (SMIL Timesheets)

5. Portabilité : publications multi terminaux (PC, mobiles) : Code de traitement de la synchronisation et de l'animation très léger (< 2000

lignes de JavaScript) Feuilles de style pour la publication multi-terminaux (PC, mobiles) Adaptation multi-niveaux : média (sélection), structure (présentation des listes,

des liens)

C2M 5

III SMIL-TIMESHEETS : RÉALISATION D'UN LECTEUR MULTIMÉDIA

INTÉGRÉ AUX NAVIGATEURS

HTML5 introduit la possibilité de synchroniser des médias continus (audio, vidéo) avec des éléments de pages web, grâce à l’API MediaElement1 : une grande partie des applications multimédia qui nécessitaient un greffon Flash est donc désormais réalisable en HTML5 natif, avec du code JavaScript spécifique pour la gestion des interactions utilisateur. Néanmoins, la mise en œuvre de telles applications multimédia en HTML5 natif reste délicate, requiert l’écriture de code JavaScript spécifique, et n’est pas supportée par les anciens navigateurs (Internet Explorer 6 à 8 en particulier).

Notre approche consiste à supporter un sous-ensemble de SMIL directement dans la page HTML pour décrire la synchronisation des médias continus et les interactions utilisateur en déclaratif, et non en JavaScript. Les modules SMIL que nous supportons sont décrits par le W3C :

SMIL Timing and Synchronization2 (recommandation officielle) SMIL Timesheets3 (working draft)

Une bibliothèque JavaScript implémentant SMIL Timing et SMIL Timesheets est

proposée sous le nom de « timesheets.js ». Cette implémentation permet de contourner les difficultés de synchronisation de médias en HTML5 :

syntaxe purement déclarative pour décrire la synchronisation des médias continus et les interactions utilisateur : la conception de documents est facilitée : la syntaxe SMIL est parfaitement

définie par le W3C, il suffit de l’utiliser directement dans la page web (SMIL Timing) ou dans un document externe (SMIL Timesheets) ;

la maintenance évolutive de l’application multimédia est grandement simplifiée puisqu’aucun code JavaScript spécifique n'est requis ;

support des anciens navigateurs grâce à un greffon Flash : Flash n’est utilisé que pour la lecture des médias continus : l’ensemble de la

page web reste en HTML, ce qui favorise l’accessibilité et l’indexation des contenus et permet de dissocier facilement le contenu (HTML) de la mise en forme (CSS) ;

timesheets.js fournit une couche d’abstraction logicielle permettant d’écrire une page en HTML5 et de l’afficher sur tous les navigateurs ;

navigation temporelle : SMIL repose sur le concept de conteneurs temporels — cf. l’attribut

timeContainer4 — qui permettent de structurer finement des animations, annotations multimédia ou diaporamas ;

chaque élément enfant d’un conteneur temporel peut servir de lien temporel5

1 - http://www.w3.org/TR/html5/video.html2 - http://www.w3.org/TR/SMIL3/smil-timing.html3 - http://www.w3.org/TR/timesheets/4 - http://labs.kompozer.net/timesheets/timeContainer.html5 - http://www.w3.org/TR/SMIL3/smil-timing.html#Timing-HyperlinkImplicationsOnSeqExcl

C2M 6

enrichissement visuel en CSS3 : au sens de SMIL Timing, l’activation et la désactivation d’un élément temporel

se traduisent par un changement de contexte de présentation — cf. l’attribut timeAction6 — qu’il est facile de lier à des règles de style (CSS) ;

CSS3 permet d’exploiter ces changements de contexte de présentation en les associant à des transitions visuelles progressives, que ce soit pour créer un simple effet de fluidité ou une animation d’élément HTML ;

comme pour toutes les règles CSS, les règles CSS3 sont ignorées par les navigateurs qui ne les implémentent pas (on parle de « dégradation harmonieuse » de présentation) : les navigateurs modernes utiliseront les ressources matérielles GPU pour ces effets de transition, les autres les ignoreront — dans aucun cas, ces enrichissements visuels ne pourront créer de dysfonctionnement dans le navigateur utilisé.

Cette bibliothèque « timesheets.js » s’inscrit dans la continuation du projet LimSee3, qui proposait un début d’implémentation de SMIL Timesheets. Le but poursuivi est d’adresser des besoins tels que les diaporamas, l’annotation de médias, la présentation de cours / conférence…

Le projet « Timesheets » est publié ici : http://labs.kompozer.net/timesheets/ et sera hébergé sur le site INRIA par la suite.

6 - http://labs.kompozer.net/timesheets/timeAction.html

C2M 7

IV TIMECONTROLLER.JS : COMPOSANT DE WAVEFORM ET LIGNE DE

TEMPS SÉMANTIQUEMENT ENRICHIE

En complément du support de SMIL Timing et Timesheets qui est assuré par la bibliothèque « timesheets.js », un composant d’interface utilisateur est développé pour le contrôle enrichi d’un conteneur temporel SMIL : c’est le composant «

timeController.js ».

Ce composant permet de définir facilement les contrôles habituels de médias continus :

bouton Lecture / Pause indication du temps écoulé, en texte et/ou visuellement navigation temporelle (slider)

Il permet également de lier une table des matières à un média continu (ou à n’importe quel type de conteneur temporel SMIL) :

boutons premier / précédent / suivant / dernier synchronisation de table des matières sur la lecture du média : l’élément courant

de la table des matières est mis en évidence dynamiquement

Ce composant « timeController » est défini par un micro-format spécifique : le rôle de chaque élément d’interface est défini par une classe HTML, et la présentation visuelle est décrite en CSS. L’utilisation d’un micro-format permet de redéfinir ou d’étendre facilement ce composant tout en assurant la compatibilité avec tous les navigateurs web courants.

Le composant « timeController » peut également être utilisé pour les tâches d’authoring multimédia (implémentation XBL pour SCENARI, notamment). Dans ce contexte il peut être enrichi techniquement, notamment en proposant l’affichage d’une forme d’onde

(waveform) pour permettre de caler précisément la synchronisation temporelle des éléments HTML sur une piste audio, à l’instar de ce qui est proposé par la plupart des logiciels de montage audio/vidéo. La version XBL du timeController pourra ainsi être utilisée dans un contexte SCENARI pour la définition de conteneurs temporels SMIL.

C2M 8

V PREMIERS RÉSULTATS DE PUBLICATION WEBRADIO

Les développements effectués sur timesheets.js et timeController.js ont pour but de disposer d’une pierre d’achoppement pour la conception de l’outil auteur multimédia :

timesheets.js implémente une spécification bien définie du W3C (SMIL-Timing, SMIL-Timesheets) : les données de synchronisation temporelles sont conformes à un format pivot qui permet d’assurer la maintenabilité du projet et l’interopérabilité avec des outils tiers

timeController.js fournit un composant de ligne de temps facilement personnalisable, qui est utilisé tant pour la lecture de média dans le navigateur que pour le calage temporel d’éléments visuels par l’auteur multimédia.

Ces deux développements ont été validés sur différents cas d’étude, et notamment sur une publication WebRadio de l’INA. Cette application GRM-INA (T4) (cf. annexe 1 page 12) permet la republication d'émissions radiophoniques chapitrées et enrichies par des images, des textes et des compléments multimédias (texte, images, audios). Elle peut être classée dans la catégorie des documents d'annotation de flux multimédia (ici audio).

Ce chapitre décrit les réalisations effectuées dans le cadre de C2M (version du 19 novembre 2010 et version actuelle en février 2011) à partir de l'existant qui avait été développé avant le projet. Un bilan et une proposition de suite des études et réalisations concluent ce chapitre.

Version pré-C2M

Cette version est accessible ici : http://www.ina-entreprise.com/sites/ina/medias/upload/grm/webradio/v2/avs/productions/fontaine/index.html

Cette version est issue d’un ancien modèle de publication SCENARI :

définition d’un média maître (piste audio) segmenté en plusieurs sections contigües, sur lequel des diapositives (= fragments de document) sont synchronisées ;

le titre de chaque section apparaît au survol de la ligne de temps (timeline) ; pour certaines sections, des pages complémentaires sont proposées : texte,

images et/ou contenu audio ; dans le cas d’un contenu audio complémentaire, la lecture de celui-ci met automatiquement en pause le média maître.

Cette version est fonctionnelle mais repose entièrement sur Flash™, ce qui cause trois types de problèmes :

incompatible avec iOS (iPod, iPhone, iPad…) ; pas de séparation contenu/présentation (ce qui impose notamment de repasser

par SCENARI pour chaque mise à jour de la charte graphique du site web) ;

C2M 9

aucun contenu déclaratif : accessibilité et indexations limitées (totalement inexistantes dans cette version).

Plus généralement, ce type de publication WebRadio reste entièrement défini par la

seule édition sémantique SCENARI et ne peut pas être modifiée par des outils tiers pour des améliorations esthétiques.

Version du 19 novembre 2010

Cette version est accessible ici : http://labs.kompozer.net/timesheets/private/ina/fontaine2.html

Ceci est la première version basée sur HTML5 et timesheets.js (version 0.3) qui ait été présentée à l’INA :

compatible iOS (iPod, iPhone, iPad…) séparation contenu (HTML5) / présentation (CSS) : accessibilité, indexabilité,

évolutivité synchronisation temporelle assurée en SMIL-Timing navigation temporelle : chaque section est identifiée par un attribut ID qui permet

ainsi de définir facilement une table des matières, et de diffuser des URLs pointant directement vers une section audio spécifique.

Les principales limitations de cette version ont été identifiées :

non supporté par Internet Explorer 6 à 8 la ligne de temps (timeline) nécessite du code HTML5+JavaScript spécifique les contenus complémentaires n’apparaissent pas dans la table des matières, et la

lecture des compléments audio n’interrompt pas le média maître quelques visuels sont manquants (non disponibles à l’INA au moment de la démo)

Cette maquette a permis de démontrer que la solution Html5 + timesheets était une technologie pertinente pour la publication des contenus multimédias Webradio. Outre les limitations listées ci-dessus, le bilan de la démonstration du 19/11/2010 a permis :

de proposer de capitaliser le travail par la réalisation d'un composant timeline générique (timeline/sommaire) avec paramétrage de son visuel ;

d'identifier de nouveaux besoins tels que la production d'une feuille de style CSS adaptée aux terminaux mobiles.

Par ailleurs, on a pu observer que la réactivité de l'interface utilisateur était bien meilleure en HTML5+SMIL qu'en Flash : notamment, le temps de latence lié à l'initialisation de chaque section Flash a complètement disparu. Accessoirement, la structure de document en HTML5+SMIL permet de définir des effets visuels de transition qui ne grèvent pas les performances du navigateur, assurant ainsi une expérience utilisateur adaptée aux possibilités du navigateur et du terminal.

Version actuelle

Cette version est accessible ici : http://labs.kompozer.net/timesheets/private/ina/ (en cours au 1er février 2011)

C2M 10

La version en cours profite des développements effectués sur timesheets.js (version 0.4) et timeController.js :

compatibilité Internet Explorer 6 à 8 grâce au support de la bibliothèque MediaElement.js7 dans timesheets.js;

l’utilisation de timeController permet de simplifier grandement le code HTML et permet à un designer web de personnaliser entièrement l’interface avec CSS, et éventuellement d'inclure des effets de transition comme ceux qui sont proposés pour l'affichage des compléments et de la table des matières ;

les sections complémentaires peuvent contenir des animations SMIL (par ex. le carrousel d’images sur la section 4) ;

aucun code JavaScript spécifique n’est requis : tout est entièrement décrit par le contenu déclaratif (HTML5 et SMIL-Timesheets).

1 Bilan et suite des études et réalisations

Les résultats obtenus sur cet item de publication WebRadio permettent de confirmer l’adéquation des outils aux besoins ; d’autres cas d’étude nous ont permis de valider l’utilisation de ces outils pour des applications vidéo et diaporama.

Il nous reste maintenant à développer l’outil auteur multimédia proprement dit : un éditeur SMIL-Timesheets pour l’annotation de médias et l’enrichissement visuel (« esthétique ») de diaporamas. La définition et la validation des composants timesheets.js et timeController.js permettent de concevoir un outil auteur qui ne produise que des documents déclaratifs, sans avoir à générer du code JavaScript (ou Flash, comme c'était le cas avec la précédente version).

7 - http://mediaelementjs.com/

C2M 11