Vidéo Accessible

Un plugin pour faciliter la diffusion de vidéos accessibles.

Accessibilité des vidéos

Accessibilité de la vidéo

Afin d’être pleinement accessible, une vidéo (composée d’images et de sons) doit répondre à plusieurs critères.

Le critère de base est de fournir une alternative textuelle à la vidéo, c’est ce qu’on appelle également un transcript (ou retranscription) textuel.

Pour améliorer encore l’accessibilité il peut être utile voir nécessaire de fournir des alternatives synchronisées à la vidéo. Ces alternatives peuvent être de deux types :

  • des sous-titres (alternatives aux sons),
  • une audio-description (alternative aux éléments visuels)

Ces alternatives synchronisées peuvent être incrustées directement dans le fichier vidéo ou gérées/activées par le lecteur vidéo qui utilisera alors des fichiers externes de type xml pour les sous-titres et mp3 pour l’audio-description.

Accessibilité du lecteur vidéo

Enfin l’interface du lecteur vidéo lui-même doit également être accessible à savoir, être pleinement utilisable au clavier et être lisible dans un lecteur d’écran de type JAWS ou NVDA. La navigation au sein de l’interface se fait en utilisant la touche tabulation (attention les navigateurs autres que IE ont besoin de la souris pour mettre le focus sur l’élément ou sortir de l’élément)

Que fait ce plugin ?

Ce plugin a donc été développé de manière à pouvoir :

  1. permettre l’association entre une vidéo et les différents fichiers servant d’alternatives :
    • fichier de transcript,
    • fichier de sous-titre,
    • fichier d’audio-description.
  2. afficher cette vidéo dans un lecteur vidéo accessible

Le plugin vidéo accessible

Choix du player

Le lecteur JWPlayer par LongTail vidéo, disponible sous licence CC-BY-NC, répond aux différents critères d’accessibilité.

Un exemple d’intégration du plugin est notamment visible sur les sites de l’Agence de la Biomédecine pour lesquels le plugin a été développé dans le cadre d’une mise en conformité au RGAA : www.dondorganes.fr

Enrichissement des vidéos

Lorsque vous ajoutez un document de type vidéo, le formulaire d’édition proposé par le plugin Médiathèque est alors enrichi avec de nouvelles possibilités.

Formulaire d’édition d’une vidéo

En plus de la possibilité d’ajouter une vignette à la vidéo, comme SPIP le prévoit aussi nativement, il devient possible d’y ajouter plusieurs fichiers complémentaires :

  • Un fichier de sous-titrage
  • Un fichier d’audio-description
  • Un fichier de transcription
Le formulaire donne la possibilité d’ajouter des fichiers joints à la vidéo

Chacun de ces fichiers peut être téléchargé depuis votre ordinateur, ou depuis une URL distante, comme pour la vignette.

Le formulaire donne la possibilité d’ajouter un sous-titrage

Ajouter un sous-titrage

Un fichier de sous-titrage doit être au format .srt ou au format .xml. Pour faire un essai, vous pouvez utiliser http://www.longtailvideo.com/jw/upload/corrie.xml

Ajout d’un sous-titrage

Une fois le fichier ajouté, il apparaît dans le formulaire avec ses caractéristiques.

Ajouter une audio-description

Un fichier d’audio-description doit être au format audio, mais JWPlayer ne prend en charge que deux formats : AAC (.aac, .m4a) et MP3 (.mp3). Pour faire un essai, vous pouvez utiliser http://www.longtailvideo.com/jw/upload/corrie.mp3

Ajout d’une audio-description

Une fois le fichier ajouté, il apparaît dans le formulaire avec ses caractéristiques.

Ajouter un transcription au format texte

Pour la transcription, vous pouvez utiliser n’importe quel fichier fournissant un contenu texte, avec bien sûr une préférence pour un format ouvert et interopérable.

Ajout d’une trancription

Une fois le fichier ajouté, il apparaît dans le formulaire avec ses caractéristiques.

Installation du plugin Vidéo Accessible

Ce plugin s’installe comme n’importe quel autre. Il ne nécessite pas le plugin Médiathèque car il est utilisable sans (dans le cas où l’on ne veut utiliser que le modèle vidéo). Il est toutefois fortement recommandé de l’utiliser conjointement avec le plugin Médiathèque pour bénéficier de l’interface enrichie lors de l’édition des vidéos dans les documents de SPIP.

Pour la page de configuration du plugin, il est nécessaire de disposer de SPIP-Bonux ou du plugin itérateurs qui fournissent l’un et l’autre la boucle POUR.

Activer le plugin

L’activation du plugin donne accès à une page de configuration dédiée au plugin, via l’icone en forme d’outils située sur la droite.

Activer le plugin « Vidéo Accessible »

Configurer le plugin

La page de configuration des vidéos permet de personnaliser le comportement par défaut et l’apparence des vidéos.

Configuration du plugin et préférences du lecteur vidéo

À partir du moment où le plugin est actif, toutes les vidéos insérées par le raccourci <embXX> ou <videoXX> seront prises en charge par le plugin et insérées via le player JWPlayer.

Les réglages configurables sont :

  • Apparence du lecteur : choix parmi plusieurs skins libres.
  • Position de la barre de contrôle du lecteur
  • Autostart de la vidéo
  • Position des boutons des plugins
  • Activation des sous-titres par défaut
  • Fond utilisé pour l’affichage des sous-titres
  • Taille de la police des sous-titres
  • Activation de l’audio-description par défaut
  • Mixage de l’audio-description avec la piste son de la vidéo

Chaque réglage configuré ici peut-être surchargé au cas par cas par un paramètre du modèle. Cette page de configuration est donc aussi un aide-mémoire qui rappelle comment surcharger chaque comportement.

Ajouter une vidéo

Format des vidéos

JWPlayer supporte les formats vidéos H.264 (.mp4, .mov, .f4v), FLV (.flv) et 3GPP (.3gp, .3g2).

Néanmoins, si vous voulez bénéficier de la lecture de vos vidéos sur les mobiles de type iOS qui ne supportent que H.264, vous avez intérêt à utiliser ce format de préférence. Ainsi JWPlayer proposera la vidéo dans ce format via la balise HTML5 <video> pour la lecture sur ces périphériques.

Pour faire un essai, vous pouvez utiliser http://www.longtailvideo.com/jw/upload/corrie.flv et sa vignette http://www.longtailvideo.com/jw/upload/corrie.jpg

Insérer une vidéo dans un texte

Une fois votre vidéo chargée dans les documents, et enrichie par les fichiers complémentaires vus plus haut, vous pouvez l’insérer par le raccourci SPIP habituel : <emb123> en remplaçant 123 par le numéro de document de votre vidéo.

Affichage de la vidéo dans son player au chargement de la page

La vidéo est présentée au chargement avec la vignette en image statique. Un lien apparaît explicitement vers la transcription lorsqu’elle est disponible. Un lien apparaît aussi pour télécharger le plugin flash pour s’assurer que le visiteur dispose de tous les outils pour lire la vidéo.

Un clic sur la vidéo suffit à déclencher la lecture avec sous-titrage et audio-description (si ils ont été activés par défaut).

Lecture de la vidéo avec sous-titrage

Considérations techniques

Web Performance

Le plugin a été optimisé pour les sites qui diffusent quelques vidéos dans leur contenu, avec l’hypothèse qu’une faible proportion des pages du site contient des vidéos.

De ce fait, au lieu d’insérer tout le javascript sur toutes les pages du site, le plugin ne l’insère à la volée que lorsqu’une page contient une vidéo, repérée par la chaine video-jwplayer insérée par le modèle <video>. Ce javascript est inséré en pied de page, pour ne pas ralentir le chargement du reste de la page.

Dans le cas d’un site qui utiliserait massivement la vidéo sur toutes ses pages, il serait préférable d’opter pour une insertion systématique du javascript, concaténé et minifié avec les autres scripts de la page.

Dans le HTML, il a été choisi d’insérer une balise HTML5 <video> qui porte nativement la vidéo et la vignette. Cela permet la lecture de la vidéo même sans javascript ni flash, pourvu que le format vidéo soit le bon. C’est donc la solution qui permet la plus grande interopérabilité.

Interopérabilité

Dans le cas de la lecture sur un périphérique iOS, JWPLayer insère la version HTML5 du player, basée sur un enrichissement javascript de la balise <video>.
Il suffit donc de choisir un format H264 pour que les vidéos soient lisibles sur la grande majorité des plateformes.

Personnalisation du player

JWPlayer est personnalisable par des skins et des plugins. Le plugin inclue nativement les skins sous licence libre disponibles sur http://www.longtailvideo.com/addons/skins
Si vous souhaitez ajouter une skin payante, ajoutez-la dans un sous-dossier jwplayer/skins/nomdelaskin de votre dossier squelettes. Elle apparaitra alors automatiquement dans la page de configuration.

Veillez bien à n’utiliser que des skins compatibles JW Player 5.2 et plus et à installer dans le dossier aussi bien le .zip que sa version décompressée qui est utilisée par la version HTML5 du player.

Discussion

73 discussions

  • Bonjour,

    En voulant me servir de la fonctionnalité des sous-titres, cela fonctionnait bien sous Spip 2 en utilisant |soustitre=http://lien_vers_mon_fichier.srt, mais j’ai eu quelques difficultés sous Spip 3.
    J’ai téléversé mon fichier srt dans le champ « sous-titre » de la fiche de mon doc vidéo (via médias), mais ce dernier n’était pas pris en compte lors du visionnage de la vidéo.

    Pour résoudre le problème, j’ai édité le fichier modeles/video.html, et j’ai modifié la boucle « annexes » :
    avant :

    <BOUCLE_annexes(DOCUMENTS spip_documents_liens) ...

    après :

    <BOUCLE_annexes(spip_documents_liens documents) ...

    Après cette modification, tout est rentré dans l’ordre (spip 3.0.17 et video accessible 0.6.8)

    Et merci pour ce plugin.

    Répondre à ce message

  • 1

    Bonjour,
    Merci pour ce plugin, cependant j’ai un soucis après l’avoir installé en local (spip 3.0.11), mon fichier est au format 3gp - taille inscrite (720x480) 41Mo bien installé, le plugin est configuré - J’ai bien la visualisation de l’écran et le texte, j’entends le son mais je n’ai pas l’image...aurais-je oublié quelque chose ?
    je précise que je n’ai pas installé le plugin médiathèque et que je n’ai aucun autre plugin autre que ceux installé d’office avec spip 3
    merci bq de votre aide.

    • Eh bien je me réponds en m’excusant d’être intervenu pour si peu...j’ai transcodé le 3gp en Mpeg4 et tout va bien en lecture d’image. J’en déduis que JWPlayer ne supporte que le H264 et pas le 3GPP comme ce qui était indiqué plus haut. Merci pour tout...

    Répondre à ce message

  • La licence de JW Player est non commerciale. Quelqu’un a-t-il mis en place le plugin avec une licence commerciale ? Faut-il le modifier pour que la licence soit prise en compte s’il vous plaît ?

    Répondre à ce message

  • 2
    monsieurL

    Bonjour,

    Je suis sous spip 3.0.11. hébergé chez free. J’ai mis à jour comme indiqué le plugin accés restreint (vider le cache, etc...). Désactiver le plugin multimedia qui ne fonctionne plus et installé le plugin video accessible.

    Mais ca ne fonctionne pas, un message incompréhensible avec une série de chiffre et lettre s’affiche et lorsque qu’on relance la video, le lecteur semble charger sans fin....
    Si je désactive le plugin accés restreint, j’ai de nouveau le message du genre « Task Queue failed at step 5 : .... ».

    Et pour les audio, je n’ai absolument rien qui s’affiche.

    Merci de votre aide.
    Cordialement.

    • Je pense que cela vient de la protection des documents qui tu as du activer dans le plugin accès restreint. Sur un hébergement free la protection des documents ne permet pas la lecture des vidéo par le player.

    • monsieurL

      Bonjour,

      J’ai testé sur un site qui n’est pas hébergé par free. Je n’ai pas ce problème effectivement...

      Pour l’audio, j’ai résolu le problème avec le plugin MediaElementPlayer (en test) . Pour la video, ça ne marche pas, il ne semble n’accepter que du mp4, et mes video sont en flv.

      Dommage.

      Merci quand même !

      Cordialement.

    Répondre à ce message

  • 6

    Bonjour Cédric
    Les vidéos ne fonctionne pas avec un Iphone 4 sous Ios 6.0.1 :-(
    que cela sois sous SPIP 2.1.19 [19922] ou SPIP 3.0.5 [20066]

    exemple sous spip 3.0.5
    http://www.lien-d-amis.net/spip3/spipdev/spip.php?article50

    Cordialement, Franck

    • pour plus de précision, il s’agit des vidéos qui « en local » ((sur le serveur) qui à été télécharger via spip)) qui ne fonctionne pas, par contre, une vidéo qui se trouve sur un autre serveur fonctionne parfaitement.

    • Un autre bug, mais qui ne touche que quand nous sommes en SPIP 2.1.19 [19922]
      Avec uniquement :
      Mediathèque 1.6.14 [62364]
      Bonux 2.3.0 [61354]
      Video Accessible 0.6.6

      Quand on va dans la médiathèque et que l’on clique sur « modifier » pour donner un titre au document, si on donne par exemple le titre au doc : Ports d’attache

      La vidéo ne fonctionne plus et ça peu importe le navigateur car dans le titre, il y a ’
      Sans ’ alors la vidéo fonctionne

    • Concernant la video qui ne se lit pas sous iOS, je vois la meme chose sur mes devices iOS 5. Cela ne vient pas du player mais bien du format de l’encodage de ta video qui n’est pas compatible. Il faut revoir l’encodage en H264 et verifier que le fichier que tu obtiend est bien lisible sous iOS avec son url directe.

      Pour le bug des apostrophes je suis surpris ca il est justement corrigé par la derniere version du plugin. Tu n’utiliserais pas une version personalisee du modele venant d’une version precedente par hasard ?

    • Concernant l’apostrophe, non, j’ai jamais toucher au modele, donc, cela ne peux pas venir de là.
      Par contre, le problème ne touche que spip 2.1.19 en 3.05 cela fonctionne

      Un autre exemple :
      http://www.lien-d-amis.net/spip3/spip21/spip.php?article14

      Cette fois, c’est une vidéo distante, j’ai fait un test en changeant le titre et en écrivant Génératio’n à la place de génération, bein, ça marche pas.

      Concernant la vidéo, pourtant, c’est un fichier .mp4 et VLC m’indique :

      Type : Video
      Codec : H264 - MPEG-4 AVC (part10)(avc1)
      résolution 640*490
      débit d’image:30
      Format décodé : Planar 4:2:0 YUV

      Type audio
      Codec : MPEG AAC Audio (mp4a)
      Canaux : stéréo
      Fréquence d’échantillionnage 48000Hz

      Je viens de faire des essais en directe et là, il semble que l’Iphone 4 ne veut pas la lire, donc, cela ne vient pas du plug, je vais voir pour refaire la video, sinon, c’est un bug de Ios 6.0.1 :D ( mais là, j’ai un doute, cela aurait fait du « bruit » )

    • Re
      Bon après avoir ré-encoder la vidéo, cela ne fonctionne quand même pas avec Iphone 4 sous Ios 6.0.1 (il n’est pas jailbreaker)
      En faite, on dirais qu’elle apparait très rapidement, puis disparait.

      Ce qui est drôle, c’est que la phrase « Téléchager le plug-in Flash » ne bouge pas, elle reste en bas de la page, comme si le player était là, mais invisible

      Sous SPIP 3.0.5 [20066]
      http://www.lien-d-amis.net/spip3/spipdev/spip.php?article50

      Sous SPIP 2.1.19 [19922]
      http://www.lien-d-amis.net/spip3/spip21/spip.php?article16

      Cela dit, si je clique dans l’article avec l’Iphone sur le doc de la vidéo joints, la lecture fonctionne parfaitement. Donc, le format est bien lisible maintenant :

      Pour info, VlC me dit :
      type : Video
      Codec : H264 - MPEG-4 AVC (part10)(avc1)
      langue : English
      Résolution : 640*480
      Débit d’images : 30
      Format décodé : Planar 4:2:0 YUV

      Type : Audio
      Codec : MPEG AAC Audio (mp4a)
      Langue : English
      Canaux : Stéréo
      Fréquence d’échantillonnage : 44100 Hz

    • Bonjour Cédric

      J’ai trouver le problème, il vient de la version de plugin jwplayer !
      Dans le plug, il s’agit de la version 5.6, j’ai donc changer pour passer en 5.10 et là, miracle, la lecture fonctionne sous Ios 6.1.3 !!!! :-D
      J’ai essayer en 6.3, mais il semble qu’il y a eu de gros changements, donc...
      http://developer.longtailvideo.com/trac/browser#tags

      Si tu regardes ce lien
      http://www.lien-d-amis.net/spip3/spip21/spip.php?article17
      Tu verras que la video fonctionne maintenant sous iphone

      Codec : H264 - MPEG-4 AVC (part10)(avc1)
      Résolution : 640*480
      Débit d’images : 30
      Format décodé : Planar 4:2:0 YUV

      Type : Audio
      Codec : MPEG AAC Audio (mp4a)
      Canaux : Stéréo
      Fréquence d’échantillonnage : 8000 Hz

      Donc ma video fonctionnait parfaitement en « directe » mais pas avec le plug, dans un article avant que je change la version de jwplayer
      Faudrait que tu fasses la mise à jour toi même, car je ne peux le faire :-(

      J’ai donc changer :
      jwplayer.js
      player.swf
      swfobject.js

      Franck

    Répondre à ce message

  • OneMore

    Bonjour,

    Ce plugin est très bon pour d’anciennes videos en flv,
    par contre il semble impossible de le faire fonctionner
    avec le plugin Video(s).

    Donc j’ai désactivé le plugin Video(s), mais là,
    sur les vidéo distantes, Vimeo, TouTube et cie,
    elles apparaissent toutes dans un lecteur au format 320x240
    même pour les vidéos de 640px de large.

    Depuis l’interface de la médiathèque, il n’y a pas les champs
    Largeur et Hauteur qui apparaissent pour un fichier .flv (lorque du moins l’url
    indique clairement le type de fichier monsite.fr/films/zefilm.flv, ce qui n’est pas le cas
    pour une url de YT du style .youtube.com/watch ?v=kI8N93G0yk7).

    Comment faire pour pouvoir redimensionner le lecteur
    en fonction la taille de la vidéo ?

    Merci

    Répondre à ce message

  • Salut,

    Pour info le fichier mp3 ne psse pas sur une install toute neuve (spip 3.0.5), ça indique

    Format incorrect : l’audio-description doit être au format audio

    Puis Erreur SQL 1054
    Unknown column ’media’ in ’field list’
    SELECT media FROM spip_types_documents WHERE extension=’mp3’

    Pour le fichier d’exemple en xml, ça passe pas non plus. (un srt passe nickel par contre)

    En tout cas, belle initiative !

    Répondre à ce message

  • Bonjour,
    Je n’arrive pas à comprendre quels formats vidéo sont supportés par ce plugin ou ce qui fait qu’ils ne le sont pas.
    J’ai un lien vers youTube qui fonctionne parfaitement (avec une image fixe tant qu’on ne la fait pas jouer). Un mp4 en local n’affiche qu’une vignette noire, seul le son joue, même en chargeant le plug-in Flash.
    Avant d’essayer tous les formats vidéo, je veux bien quelques indications.

    Répondre à ce message

  • bonsoir,
    j’ai un site installé sur spip 3.0.5, le plugins Video-Accessible v0.6.6, le fonctionnement est correct dans un article, mais voulant tester l’audio-description, je ne parviens pas à télécharger le fichier d’exemple corrie.mp3, les messages d’erreur correspondants en log

    « SELECT media
    FROM slem.spip_types_documents
    WHERE extension=’mp3’
    Dec 06 00:36:26 82.240.95.168 (pid 26537) :Pri:ERREUR : Erreur mysql 1054
    Dec 06 00:36:26 82.240.95.168 (pid 26537) :Pri:ERREUR : Unknown column ’media’ in ’field list’ - query inconnue
    Dec 06 00:36:26 82.240.95.168 (pid 26537) :Pri : !INFO : Upload corrie.mp3 interdit (Format incorrect : l’audio-description doit être au format audio) »

    Plus unerreur sur la page au moment du téléchargement

    « Erreur SQL 1054
    Unknown column ’media’ in ’field list’
    SELECT media FROM spip_types_documents WHERE extension=’mp3’ »

    la table spip_types_documents comprend bien un champ avec mp3 (n°75), mais pas de colonne media (celle-ci est dans la table spip_documents)

    pour information j’arrive bien a télécharger ce meme fichier directement depuis la gestion des documents
    merci de votre aide
    la page avec la video article12

    Répondre à ce message

  • 3

    Bonjour,

    Quelle est la vérification effectuée pour le format de sous-titres .srt ?

    Lorsque je tente d’ajouter un tel fichier à une vidéo, cela m’affiche un message d’erreur me précisant que mon fichier doit être de type .srt ou .xml. Alors qu’il s’agit bien d’un fichier .srt valide et lisible sur n’importe quel lecteur vidéo.

    Tout le reste (vignetttes, transcription, etc.) fonctionne parfaitement.

    Une idée ?
    Merci !

    • J’ai fini par trouver une solution à ce problème.

      Je ne sais pas ce qu’il en est avec SPIP 3, mais dans la table spip_types_documents de mon SPIP 2.1.19, le format de fichier SRT n’existe pas ! Par conséquent, à chaque tentative d’ajout d’un fichier .srt sur une de mes vidéos, SPIP me l’empaquetait par défaut dans un fichier .zip, et par conséquent le plugin m’annonçait que mon fichier n’était pas au bon format.

      Il suffit donc d’ajouter une ligne avec les infos suivantes dans la table spip_types_documents pour que le tout fonctionne correctement :

      extension srt
      titre SubRip Subtitle
      descriptif
      mime_type text/plain
      inclus non
      upload oui

      Je ne suis pas mécontent d’avoir pu résoudre ce souci, parce qu’honnêtement, qui utilise le format XML pour créer des sous-titres, quand tous les outils de création existant génèrent du SRT de manière automatique ? -_-

      Au passage, pour ceux que ça intéresse Media Subtitler est ultra-léger et très simple à utiliser : il suffit d’importer un transcript au format txt, en ayant sauté des lignes entre chaque phrase à afficher, et la transformation en fichier SRT se fait alors via un simple clic-and-hold sur un gros et unique bouton.

    • Bonne remarque, je suis étonné de pas avoir remarqué ce manque plus tôt. Cela dit le type srt est normalement intégré à partir de la release 2.1.18 de SPIP qui l’ajoute aux types connus. C’est étrange que tu aies du faire cette modification à la main...

    • Merci pour ton retour. Au sujet de la non mise à jour de ma table, je ne sais pas si ça importe, mais je suis passé directement de la 2.1.14 (ou 12, je ne sais plus) à la 2.1.19.

      Quoi qu’il en soit, merci pour cet excellent plugin, extrêmement pratique pour rendre les vidéos accessibles en quelques clics ! :)

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

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 champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom