Bienvenue à Mammouthland,

Lundi 26/12/11

HTML5 : vidéo et accessibilité

Le déclin du support de flash, en particulier sur certains smartphones et tablettes, a sonné le glas des lecteurs flash pour diffuser des vidéos. Pour être in, il faut utiliser le html5.

Soit mais comment ça marche, surtout si l'on veut rendre la vidéo accessible aux malentendants en rajoutant des sous-titres ?

Ne caressez surtout pas l'espoir que ce soit plus simple car issus des standards. À croire que les différents acteurs du web prennent leur pied à accabler le pauvre webmestre. C'est vrai quoi, depuis que IE6 est en voie de disparition, il risquerait de s'ennuyer. Faudrait pas lui en donner ce loisir, tout de même !

Les formats

Petits rappels de rigueur sur le code... Ceux qui en connaissent déjà les rouages peuvent passer directement aux problèmes des sous-titres.

Pour un support multi-navigateurs, il faut mettre le fichier vidéo en au moins 2 formats :

• mp4/H.264, pour Internet Explorer depuis sa version 9 (supporté aussi par chrome) et à peu près tous les navigateurs de smartphones et tablettes 
• ogg/Theora ou webm/VP8 pour tous les autres navigateurs.

Je recommande vivement l'utilisation de Miro pour effectuer les conversions de formats nécessaires, tant il est efficace et simple d'utilisation.

Le code

.htaccess

Pour commencer, on n'oubliera surtout pas de faire un petit fichier de configuration du serveur par l'intermédiaire d'un .htaccess.

Y mettre (ou y ajouter) simplement les lignes suivantes :

AddType video/ogg  .ogv
AddType video/mp4  .mp4
AddType video/webm .webm

Code html

Le code html5 conseillé, permettant de visionner une vidéo sous tous les navigateurs récents, ressemble en général au suivant :

<video width="426" height="240" controls="controls" poster="video-hostellerie.jpg" onclick="this.play();>
 <source src="video-hostellerie.mp4" type="video/mp4" />
 <source src="video-hostellerie.webm" type="video/webm"  />
</video>

• width et height indiquent les dimensions du lecteur ;
• controls permet d'avoir la barre de lecture et ses options ;
• poster indique l'url de l'image à afficher tant que la vidéo n'est pas lancée (sauf sur IE dès que la video est chargée) ;
• autres options possibles.

Bien entendu, pas question de laisser de côté les versions d'internet explorer antérieures à la version 9. Il faudra donc rajouter, quand même, un lecteur flash.
On en trouve quelques uns gratuits sur la toile. Mon choix va vers le FLV-player qui présente les avantages de lire des formats mp4, d'être paramétrable, et d'être en licence libre.

Il est normalement d'usage de rajouter le code suivant juste avant la fermeture de la balise video.

<object type="application/x-shockwave-flash"
 codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,79,0" 
 width="426" 
 height="240" 
 data="player.swf"
 id="FLVPlayer">
  <param name="movie" value="player.swf" />
  <param name="allowscriptaccess" value="always" />
  <param name="allowfullscreen" value="true" />
  <param name="FlashVars" value="flv=video-hostellerie.mp4&startimage=video-hostellerie.jpg
  &showstop=1&showvolume=1&showtime=1" />
<p>Vous n'arrivez pas à visionner la vidéo : vous pouvez la 
<a href="video-hostellerie.mp4">télécharger</a>.</p>
</object>

Voir la vidéo.

Sous-Titrage

Attention : je prends volontairement l'option "je fais tout par moi-même". Inutile de me dire que je peux passer par des solutions toutes faites genre Youtube ou Dailymotion ! Je voudrais être au plus proche de l'accessibilité, et me passer au plus de javascript. Mais comme on va le voir, en l'état actuel des implémentations, c'est très difficile, voire impossible.

Le lecteur FLV-player permet d'incorporer des sous-titrages. Il suffit d'ajouter au paramètre FlashVars les options liées au srt. Le fichier .srt de sous-titrage est mis dans le même répertoire et portant le même nom que la vidéo (ici video-hostellerie.srt).

<param name="FlashVars" value="flv=video-hostellerie.mp4&startimage=video-hostellerie.jpg
&showstop=1&showvolume=1&showtime=1&showloading=always
&srt=1&srtbgcolor=black&srtsize=14" />

Pour générer ce fichier .srt, on peut utiliser le service Universal Subtitle qui permet de saisir et de synchroniser les sous-titres de façon relativement simple.

Ce même fichier .srt peut aussi être utilisé pour les vidéos html5... Mais en passant par du javascript, et plus exactement par du JQuery.
L'avantage est que les sous-titres pourront être mis en forme par du CSS.
L'inconvénient, vous l'aurez bien compris, est qu'en cas de non support ou de désactivation du js... plus de sous-titrage ! On arrive donc à ce paradoxe (Kafka es-tu là ?) : sans javascript, point de vidéo accessible...

La procédure est donc d'utiliser la bibliothèque JQuery et un fichier complémentaire jquery.srt.js :

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.srt.js"></script>

Les sous-titres sont extractibles dans un div qui doit avoir comme attributs :

• un data-video devant porter le même nom que celui de l'id déclaré dans la balise video ;
• data-srt qui indique l'url du fichier .srt.

<video src="video-hostellerie.webm" type="video/webm" id="video-hostellerie" />
<div class="srt" data-video="video-hostellerie" data-srt="video-hostellerie.srt"></div>

Mais il y a un hic. Ces fichiers JQuery ne fonctionnent ni avec la balise <source> ni avec des fichiers de formats .mp4. Cela ne peut donc être applicable qu'à un seul et unique format à la fois : le webm/VP8 ou le ogg/Theora.

Comment faire pour Internet Explorer, toutes versions confondues, et les terminaux tactitles en général ?
Au stade actuel de mes réflexions, je ne vois d'autre solution que d'utiliser des commentaires conditionnels (du moins pour IE) ce qui est très mauvais en terme de performances. Déjà que les vidéos sont forcément gourmandes en bande passante, là, on va gagner le pompon...

Quant aux Ipad, Iphone et autre android... L'utilisation de Media-Queries ou détection de l'agent utilisateur via un script doit être envisagé pour les cibler et les diriger vers le seul format qu'ils reconnaissent : le format mp4/H.264.

Le code serait donc finalement celui-ci (uniquement pour navigateurs dekstop) :

<!--[if !IE]>  
<video width="426" height="240" controls="controls" poster="video-hostellerie.jpg"
src="video-hostellerie.webm" type="video/webm" id="video-hostellerie" />
</video>
<div class="srt" data-video="video-hostellerie" 
data-srt="video-hostellerie.srt"></div>
<![endif]-->

<!--[if IE 9]>  
<video width="426" height="240" controls="controls" poster="video-hostellerie.jpg">
<source src="video-hostellerie.mp4" type="video/mp4" />
</video>
<![endif]-->

<!--[if lt IE 9]> 
<object type="application/x-shockwave-flash"
    codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,79,0" 
     width="426" 
     height="240" 
     data="player.swf"
     id="FLVPlayer">
  <param name="movie" value="player.swf" />
  <param name="allowscriptaccess" value="always" />
  <param name="allowfullscreen" value="true" />
  <param name="FlashVars" value="flv=video-hostellerie.mp4&startimage=video-hostellerie.jpg
  &showstop=1&showvolume=1&showtime=1&showloading=always
  &srt=1&srtbgcolor=black&srtsize=14" />
<p>Vous n'arrivez pas à visionner la vidéo : vous pouvez la <a href="video-hostellerie.mp4">télécharger</a></p>
</object>
<![endif]-->

Voir la vidéo sous-titrée.

Le retour de la vengeance du webm/VP8

Comment ? Vous dites ? « Oui mais là, sous IE9, point de sous-titres du coup ! ». Ah oui, vous avez parfaitement raison.

À cet écueil, 2 solutions possibles (bien que non satisfaisantes) :

• Ne pas mettre de lecteur html5 du tout pour IE, et laisser tout en flash.
• Se passer du format .mp4 en demandant aux utilisateurs d'IE9 de télécharger le plugin webm permettant à IE, comme vous vous en doutez, de lire des vidéos de format webm/VP8.

<!--[if (IE 9)|!(IE)]> <!--> 
<p> Utilisateur d'Internet Explorer 9 et + : télécharger <a href="http://tools.google.com/dlpage/webmmf/index.html"> ce plugin</a>  pour pouvoir lire la vidéo.</p> 
<video width="426" height="240" controls="controls" poster="video-hostellerie.jpg"
src="video-hostellerie.webm" type="video/webm" id="video-hostellerie" />
</video>
<div class="srt" data-video="video-hostellerie" 
data-srt="video-hostellerie.srt"></div>
<!--<![endif]--> 

A noter que, contrairement aux autres navigateurs de terminaux tactiles, Firefox android reconnait le format webm.

Tester la vidéo sous-titrée avec plugin

Je suis preneuse de toute autre solution (qui ne bloque pas aussi la vidéo en cas de désactivation de javascript), à commencer par une adaptation du JQuery pour une prise en charge de source.

Ressources

• Introduction à la balise vidéo en html5 (Alsacreations)
• Sous-titrer des videos html5 en attendant la balise track (Toile Libre)
• Détecter un visiteur sous Iphone en PHP et en Javascript (La ferme du web)
• Script PHP pour déchiffrer les chaines User-agent (Sébastien Guillon)
• Détecter le format video supporté par le navigateur (Mark Pilgrim)
• Easy HTML5 Video
• Commentaires conditionnels pour IE (Romy Têtue)

L'extrait de vidéo utilisé pour ces tests provient de l'Hostellerie d'Acquigny.