Moteur d`édition et de publication HTML de contenus Webradio

4 février 2011 - Version 1.1
Moteur d'édition et
de publication HTML
de contenus
Webradio orienté
"esthétique"
PROJET C2M
Fabien Cazenave (INRIA) et Cécile Roisin (UPMF-INRIA) - Équipe WAM,
INRIA Rhône-Alpes
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 ra ppor t
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ères
2. Réalisation d'un lecteur multimédia intégré aux navigateurs
3. 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 navigation
2. Accessibilité : contenus alternatifs, feuilles de style qui peuvent tirer parti du
format déclaratif
3. Référencement : contenu textuel, balises sémantiques (h1, h2, nav), navigation
temporelle
4. 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 Synchronization 2 (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
2
3
4
5
-
http://www.w3.org/TR/html5/video.html
http://www.w3.org/TR/SMIL3/smil-timing.html
http://www.w3.org/TR/timesheets/
http://labs.kompozer.net/timesheets/timeContainer.html
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.
Ve r sion pré - C2 M
Cette
version
est
accessible
ici
:
http://www.inaentreprise.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.
Ve r sion du 19 no vem br e 2 01 0
Cette
version
est
accessible
http://labs.kompozer.net/timesheets/private/ina/fontaine2.html
ici
:
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.
Ve r sion a c tue lle
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