SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

286 Plugins, 197 contribs sur SPIP-Zone, 171 visiteurs en ce moment

Accueil > Affichage multimédia > Audio, vidéo > Vidéo Accessible > Vidéo Accessible

Vidéo Accessible

6 avril 2011 – par Cerdic, goetsu – 160 commentaires

110 votes

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.

PNG - 51.3 ko
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
PNG - 12.3 ko
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.

PNG - 10.7 ko
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

PNG - 12.9 ko
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

PNG - 13.1 ko
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.

PNG - 12.9 ko
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.

PNG - 4.4 ko
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.

PNG - 63.4 ko
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.

PNG - 76.5 ko
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).

PNG - 57.5 ko
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.

Voir en ligne : http://plugins.spip.net/va

Dernière modification de cette page le 23 juin 2015

Retour en haut de la page

Tout afficher

Vos commentaires

  • Le 18 octobre à 14:25, par Guytarr En réponse à : Vidéo Accessible

    Sur un site avec des urls arborescentes, les flv sont lus dans l’espace privé, mais pas dans l’espace public (dans une sous-sous rubrique). Je ne sais pas si c’est la bonne approche, mais ajouter dans le modèle video |url_absolue à #URL_DOCUMENT résout ce soucis
    https://github.com/Cerdic/video_accessible/blob/master/modeles/video.html#L33

    Répondre à ce message

  • Le 10 septembre 2015 à 20:49, par En réponse à : Vidéo Accessible

    Bonjour,

    J’utilise ce plugin, mais avec les navigateurs, j’ai uniquement une image sans barre de contrôle, et il faut double-cliquer pour lancer la lecture, ce qui ne parait pas évident pour le visiteur.

    Est-ce que j’ai omis un paramètre ?

    Merci

    • Le 15 septembre 2015 à 17:30, par En réponse à : Vidéo Accessible

      En fait le problème se pose uniquement en activant le mode « html5 » dans les options avancées.

      Est-ce normal ?

    • Le 7 octobre 2015 à 18:30, par Mikachu En réponse à : Vidéo Accessible

      J’ai le même souci et je ne trouve pas de réponse.

      Est-ce plugin est maintenu ?

    • Le 28 janvier à 10:26, par Seb En réponse à : Vidéo Accessible

      Je constate aussi ce comportement, personne n’aurait une idée ?

    Répondre à ce message

  • Le 13 janvier à 08:56, par eddie En réponse à : Vidéo Accessible

    bonjour,
    je viens d’installer video accessible. J’ai fait un essai, mais cela ne fonctionne pas. Je m’explique : j’ai embed une petite video en .flv, je visualise l’article avant de le publier. Je vois bien le lecteur s’afficher mais il est écrit « Aucune vidéo dont le format ou le type MME est géré n’a été trouvé »
    Quelqu’un peut-il m’aider ?
    Merci d’avance !!
    Eddie

    Répondre à ce message

  • Le 28 mars 2014 à 17:17, par Loiseau2nuit En réponse à : Vidéo Accessible

    Je ne m’étais encore jamais penché sur ce plugin mais là, je viens de m’y mettre et je suis assez bluffé ! Bravo, et merci !

    Une petite question cependant :

    • est-il possible de fixer une taille de vidéo par défaut pour les vidéo que l’on embarque avec <emb ... ?
    • sinon, l’intégration de cette feature est-elle prévue et/ou comment éventuellement l’intégrer sans tout péter ^^

    Merci par avance

    • Le 28 mars 2014 à 17:19, par Cerdic En réponse à : Vidéo Accessible

      la taille de la vidéo est reprise de la largeur/hauteur renseignée sur le document vidéo dans le back-office.

    • Le 1er avril 2014 à 01:03, par Loiseau2nuit En réponse à : Vidéo Accessible

      En effet, sauf que dans le cadre d’un switch spip 2.0 vers spip 3, j’ai du changer de plugin pour les vidéos (d’où mon test de video accessible en fait) et le truc c’est que toutes les vidéos se sont réinitialisé à 0/0, du coup, j’ai la taille la plus petite déterminée sans doute par la taille originale des vidéos du site (qui il faut bien le dire, ne sont pas top, niveau qualité)

      Du coup, je me demandais si on pouvait forcer une taille d’affichage si aucune n’est spécifiée en back office et/ou si la taille spécifiée est égale à 0 ce qui, de base, n’est pas une valeur très cohérente.

      Bref, je re-regarderai tout ça demain à tête reposée ^^
      Merci pour ton retour en tout cas.

    • Le 14 avril 2014 à 15:38, par Loiseau2nuit En réponse à : Vidéo Accessible

      Bon en fait en cherchant un peu on trouve ! Il suffisait juste de surcharger et d’éditer le /modeles/videos.html

      il y a une ligne dedans qui fixe les dimensions par défaut.

       :-)

    • Le 30 janvier 2015 à 16:53, par Aymeric En réponse à : Vidéo Accessible

      Bonjour,

      Y a t-il une piste pour rendre le lecteur vidéo « responsive » ?

      Merci pour ce plugin.

      Aymeric.

    • Le 3 février 2015 à 14:20, par Loiseau2nuit En réponse à : Vidéo Accessible

      Salut :)

      A priori les vidéos sont en <embed> , donc avec un peu de CSS et quelques médiaqueries tu devrais être bon

      (sinon, en méthode à l’arrache, tu mets l’embed en width 100% dans une div qui elle, est responsive et le tour est joué :)

    • Le 12 janvier à 19:38, par Manu En réponse à : Vidéo Accessible

      Videos responsive ?
      J’ai migré un site spip 2 > spip 3. Le plugin Vidéo accessible a pris le relais du lecteur multimedia. Avec le classique binôme video_wrapper/video_container, les vidéos étaient parfaitement responsive.
      J’ai bien l’impression que le plugin Vidéo accessible a cassé tout ça... Comment peut-on rétablir ce comportement ?

    Répondre à ce message

  • Le 5 janvier 2015 à 15:54, par Yann En réponse à : Vidéo Accessible

    Bonjour,

    Sachant que le plugin iterateurs a été implémenté dans spip 3, est il encore nécessaire de brancher le plugin Bonux pour que tout fonctionne bien ?

    Merci.

    • Le 3 février 2015 à 14:52, par Loiseau2nuit En réponse à : Vidéo Accessible

      Salut,

      Je crois savoir que la majeur partie de Bonux aussi a été intégrée dans SPIP 3 (ce qui ne l’a pas été est contenu dans le plugin spip-bonux-3 qui ajoute quelques nouvelles fonctionalités intéressantes et qui, accessoirement, sert de dépendance à tellement d’autres choses que je te suggère grandement de le garder quand même)

    Répondre à ce message

  • Le 23 janvier 2015 à 18:08, par Manu En réponse à : Vidéo Accessible

    Accès SVN pour ce plugin ?
    A priori, ce plugin n’est plus accessible depuis la zone. Comment peut-on le « svn-checkouter »
    (puis le « svnupdter » par la suite ?)

    Répondre à ce message

  • Le 1er octobre 2014 à 14:23, par Marlysa En réponse à : Vidéo Accessible

    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 :

    1. <BOUCLE_annexes(DOCUMENTS spip_documents_liens) ...

    après :

    1. <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

  • Le 25 octobre 2013 à 15:46, par virgil En réponse à : Vidéo Accessible

    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.

    • Le 28 octobre 2013 à 15:59, par virgil En réponse à : Vidéo Accessible

      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

  • Le 3 septembre 2013 à 12:10, par Valéry En réponse à : Vidéo Accessible

    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

  • Le 10 août 2013 à 14:57, par monsieurL En réponse à : Vidéo Accessible

    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.

    • Le 11 août 2013 à 10:12, par Cerdic En réponse à : Vidéo Accessible

      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.

    • Le 11 août 2013 à 10:28, par monsieurL En réponse à : Vidéo Accessible

      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

Répondre à cet article

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 Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Import ICS 2 (agenda distant)

    2 août – 35 commentaires

    La version 2 du plugin « import ICS » en reprend la principale fonctionnalité, à savoir l’ajout automatique d’évènements distants dans la liste des évènements d’un site. À la différence de la première version, elle ne dépend pas du plugin « Séminaire » et est (...)

  • Newsletters

    16 janvier 2013 – 374 commentaires

    Ce plugin permet de composer des Info-lettres. Par info-lettre, on désigne ici le contenu éditorial qui va être composé et envoyé par courriel à une liste d’inscrits. Le plugin permet de composer une info-lettre à partir d’un modèle pré-composé, (...)

  • CKeditor 3.0

    4 octobre 2009 – 1217 commentaires

    CKeditor est l’évolution de l’éditeur WYSIWYG : FCKeditor, avec ce plugin vous pourrez utiliser cet éditeur à la place de l’éditeur de spip tout en laissant le choix à vos auteurs de l’éditeur qu’ils préfèrent utiliser. Attention : cet éditeur WYSIWYG (...)

  • GIS 4

    11 août 2012 – 1284 commentaires

    Présentation et nouveautés La version 4 de GIS abandonne la libraire Mapstraction au profit de Leaflet. Cette librairie permet de s’affranchir des librairies propriétaires tout en gardant les mêmes fonctionnalités, elle propose même de nouvelles (...)

  • SPIPr

    23 mars 2015 – 75 commentaires

    SPIPr est à la fois une famille de squelettes et un framework pour le développement front avec SPIP. Prêt à l’emploi, thémable, responsive, et conçu dans une approche d’industrialisation et de développement rapide. Documentation source : (...)

Ça spipe par là