Agrémenter ses présentations web avec des contenus synchronisés

On peut trouver quelques perspectives intéressantes afin d’enrichir les présentations mises à disposition sur le web : les rendre plus dynamiques par des éléments synchronisés, notamment par la balise video et son API ou par le langage SMIL.

Demeurent bien sûr les problématiques de rendre accessibles les lecteurs multimédias, notamment la balise <video> de HTML5 qui ne l’est pas encore par défaut...

Solution HTML5 et l’API vidéo

La balise <video> apparue dans la spécification de HTML5 permet d’insérer facilement une vidéo de manière native (c’est à dire sans plug-in type Flash ou Silverlight) dans une page web.

Cette nouveauté apporte plus de contrôles sur cet élément vidéo, notamment grâce à une API avec laquelle des programmations par javascript peuvent être effectuées.

La vidéo peut donc interagir avec le reste d’une page web.

Dans son article "Synchroniser du contenu avec la balise HTML5 video", Chris Heilmann déclenche l’apparition de contenus (une page wikipedia dans une iframe) entre la 4ème et la 38ème seconde de sa vidéo dans une balise <article> (partie droite de l’écran) grâce aux attributs data-start et data-end :

<article data-start="4" data-end="38">
     <header><h1>HTML5 video</h1></header>
     <p><a href="http://en.wikipedia.org/wiki/HTML5_video">HTML5 video</a> is native video for browsers based on the video element..</p>
   <iframe src="http://en.wikipedia.org/wiki/HTML5_video"></iframe>
</article>

Solution HTML et SMIL Timing

Le W3C travaille également sur le standard SMIL Timing.

Ce dernier « définit les éléments et attributs pour coordonner et synchroniser la présentation des médias au cours du temps. Le terme médias couvre un large éventail, y compris les types de médias discrets tels que des images fixes, du texte et des graphiques vectoriels, ainsi que les types de médias en continu qui sont intrinsèquement basée sur le temps, comme la vidéo, audio et d’animation. » - Source : Spécifications du W3C .

Ce standard permettra par exemple de diffuser des slides avec le commentaire synchronisé de l’auteur.

C’est ce qui est fait dans l’exemple ci-dessous sur le site de l’INRIA (Institut National de Recherche en Informatique et Automatique).

Ces slides sont synchronisés au fichier audio via une programmation faite dans un fichier SMIL où on peut lire à partir de quand vont défiler les différentes slides :

<?xml version="1.0" encoding="UTF-8"?>
<timesheet xmlns="http://www.w3.org/ns/SMIL">
 <excl mediaSync="#talk" controls="#timeController">
   <item select="#slide01" begin="00:00"/>
   <item select="#slide02" begin="00:09"/>
   <item select="#slide03" begin="00:50"/>
   <item select="#slide04" begin="01:18"/>
   <item select="#slide05" begin="01:48"/>
   <item select="#slide06" begin="02:23"/>
</excl>
</timesheet>

haut de page

Vos commentaires

Répondre à cet article

modération à priori

Attention, votre message n'apparaîtra qu'après avoir été relu et approuvé.

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d'abord sur gravatar.com (gratuit et indolore) et n'oubliez pas d'indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce formulaire accepte les raccourcis SPIP : [mon lien->url] {{gras}} {italique}. Pour créer des paragraphes, laissez simplement des lignes vides.

Suivre les commentaires : RSS 2.0 | Atom