Lecteur audio ou vidéo

Le lecteur audio ou vidéo doit pouvoir prendre en charge les sous-titres et proposer des moyens de contrôler le son et la lecture.

Règles à respecter sur les lecteurs audio et vidéo

Le lecteur vidéo (ou audio) :

• ne doit pas démarrer automatiquement ;
• doit prendre en charge les sous-titres et l’audiodescription de la vidéo ;
• doit permette à l’utilisateur de contrôler la lecture de la vidéo avec des boutons d’action du type :
  • pause/lecture,
  • avancer/reculer,
  • arrêter/monter/baisser le son,
  • afficher ou non les sous-titres et l’audiodescription.

Idéalement, le lecteur permet aussi de paramétrer l’affichage des sous-titres (taille du texte, couleur de l’arrière plan et de la police de caractère).

Exemples d’implémentation

Vidéo

Dans cet exemple de la documentation « Développeur de Mozilla », trois sources différentes pour la vidéo sont fournies. Si le premier format de la source (webm) n’est pas lisible pour le navigateur, c’est la vidéo au format suivant (mp4) qui sera lue et, si celle-ci n’est pas lisible non plus, ce sera le fichier suivant (ogv) qui sera lu.

• L’élément HTML video doit comporter a minima les deux attributs suivants :
  • L’attribut poster ; il permet de proposer une vignette à afficher avant de lancer la vidéo ;
  • L’attribut controls ; il permet d’afficher les boutons de contrôle de la lecture de la vidéo, du volume et de la mise sur pause.
• L’élément source permet de déclarer plusieurs formats de vidéo ;
• L’élément track permet d’implémenter un sous-titrage à sa vidéo.

Code HTML

<figure>
  <figcaption>Cohérence cardiaque (Vidéo de 3 minutes)</figcaption>
<video
  class="video"
  controls
  poster="images/vignette.jpg">
  <source
    src="https://archive.org/download/WebmVp8Vorbis/webmvp8.webm"
    type="video/webm" />
  <source
    src="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4"
    type="video/mp4" />
  <source
    src="https://archive.org/download/WebmVp8Vorbis/webmvp8.ogv"
    type="video/ogg" />
    <track default src="sousTitrage.vtt" />
 <p>Votre navigateur ne prend pas en charge le lecteur vidéo. Vous pouvez toutefois <a href="relaxation.mp3">télécharger la vidéo</a> ou <a href="transcription.html">accéder à la transcription textuelle de la vidéo.</a></p>
</video>
</figure>

Code CSS
On veillera à ce que le contraste de couleur entre l’arrière plan et le texte du sous-titrage respecte le ratio de contraste de 4.5:1. Par exemple en déclarant ceci (le pseudo-élément CSS ::cue permet de cibler les indications textuelles WebVTT d’un élément.) :

::cue {
  color: #fff;
  background-color: rgba(0, 0, 0, 0.6);
}

Audio

Les fichiers audio seront implémentés avec l’élément HTML audio.

Comme pour les fichiers vidéos, cet élément possède un attribut controls qui permet d’afficher les boutons de contrôle de la lecture du fichier audio, du volume et de la mise sur pause.
Enfin l’élément source permet de déclarer plusieurs formats de fichiers audio.

Pour implémenter un fichier audio, on pourra recourir au code suivant :

<figure>
  <figcaption>Séance de relaxation (3 minutes)</figcaption>
<audio controls>
  <source src="relaxation.mp3" type="audio/mpeg" />
  <source src="relaxation.ogg" type="audio/ogg" />
  <p>Votre navigateur ne prend pas en charge le lecteur audio. Vous pouvez toutefois <a href="relaxation.mp3">télécharger le fichier audio</a> ou <a href="transcription.html">accéder à la transcription textuelle de l'enregistrement.</a></p>
</audio>
</figure>