<hier> Décembre 2011 </hier>

26

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

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

Et si je veux insérer des audio-descriptions, qu'est-ce que ça donne ? rire !

Pour revenir aux écueils rencontrés au sujet de l'intégration de sous-titres, il existe une solution alternative qui, bien que moins sexy que le sous-titrage synchronisé, a l'avantage d'assurer un minimum d'accessibilité en même temps qu'une compatibilité maximale : fournir une transcription textuelle (qui, deux pierres d'un coup, permet de transcrire aussi les audio-descriptions). Ainsi, ceux qui ne peuvent accéder au sous-titrage pourront s'y replier, cependant que les autres auront le choix (n'oublions pas de laisser la possibilité de désactiver le sous-titrage, cela s'entend toujours).

Victor Brito - 27-12-2011 - 18:19

Merci Victor pour ces remarques forcément pertinentes !
Ce sont des points à rajouter, effectivement sourire

Pascale - 27-12-2011 - 18:27

28/12 : Ajout de quelques détails et ressources complémentaires malencontreusement oubliés.

Pascale - 28-12-2011 - 10:00

Alors mon J-P, quand tu passeras par là...

Ce que j'aimerais que JQuery sache faire, c'est :
- qu'il sache sous-titrer aussi les mp4. Mais pour IE seulement, car honnêtement, les sous-titrages sur un écran de smartphone, y'a pas la place.
- qu'il détecte source et non plus seulement video

Ce serait possible ça ?

Pascale - 29-12-2011 - 17:55

je ne connais pas d'empêchement technique qui ferait que ça ne marche pas sous IE, je pense que tes plugins se plantent en fait :)
Essaye plutôt avec ce player là, qui lit pas défaut les sous-titres embed en HTML5 (avec track) :
http://www.delphiki.com/html5/playr/
je l'ai vu tourner sur IE9 sans souci

PS: maintenant la spec s'appelle WebVTT, SRT, c'est fini ;)

jpvincent - 30-12-2011 - 14:04

Ben oui, mais pffff : js désactivé, tu n'as plus du tout de vidéo ! Ça ne ne va pas bof

Pascale - 30-12-2011 - 14:46

Tu illustre bien un des problèmes de la balise vidéo : On se retrouve vite avec une tonne de markup pour gérer tous les cas possibles (mp4/webm/natif/flash/device/etc.)

Mon commentaire ne sera pas forcément très constructif, mais j'ai envie de râler aujourd'hui. Les solutions que tu proposes sont tout de même de la bidouille. Tu le dis, sans JS ça ne marchera pas, ou bien à moitié. Tu ne parle pas des contrôles, que tu n'as pas personnalisé, mais si tu voulais le faire bonjour la galère.

Je n'ai toujours pas trouvé de player/framework intéressant pour résoudre tous ces problèmes… En même temps il y en a beaucoup, de problèmes. La vidéo c'est très compliqué, et c'est d'autant plus compliqué à simplifier.

D'ailleurs tu as peu parlé du mobile et tu as raison, c'est encore plus un enfer.

Sinon, bonne année.

Neovov - 09-01-2012 - 12:36

| Index | Archives | « Novembre 2011 |