TP 08 : Audio et Vidéo sur le web

Exercice 1 — Cris d’animaux #

Récupérer l'archive avec les fichiers pour faire le TP.

Vous allez réaliser une page très simple utilisant l'élément HTML audio pour rendre la page sonore.

Le site MDN Web Docs propose un tutoriel d'introduction aux contenus audio et video, ainsi que des pages de documentation sur les éléments HTML audio et video.

1. Se renseigner sur le web sur l'élément HTML audio : comment afficher les contrôles ? Comment préciser les fichiers son ?
2. Mettre en place rapidement titre et le bas de page puis les 4 boites qui contiendront les images, leurs légendes respectives et les contrôleurs de sons. Mettre en place très rapidement le style correspondant.
3. Mettre en place les 4 contrôleurs de sons et les fichiers associés : vous trouverez dans l’archive des fichiers sons de différents formats : .ogg, .wav, .mp3.
   Attention, pour la validation W3C, une balise audio ne doit pas être mise dans une balise figure !
4. Observez les problèmes posés par les différents formats de son selon les navigateurs (en essayer plusieurs et regarder les docs). Vous devez proposer plusieurs fichiers pour que le navigateur prenne celui qu’il sait lire.
   Pour bien constater quel est le fichier lu, vous mettrez sous l’image du chaton le son du chaton dans un certain format, celui du chien dans un autre format, et le loup dans un troisième, par exemple. Regardez lesquels fonctionnent suivant les navigateurs. Que se passe-t-il si aucun fichier son n’est reconnu ?
5. Testez rapidement les paramètres autoplay puis loop, mais retirez les ensuite sous peine d’énervement général !
6. L'archive contient également une vidéo de chien, en deux formats, MP4 et WebM. Ajoutez la vidéo sur la page grâce à l'élément video. Là encore, pour être supporté par le maximum de navigateurs, il faut mettre les deux formats.
7. Testez l'attribut poster de l'élément video avec une image quelconque.
8. Ajouter ensuite la video du Guardian puis créer un fichier VTT de sous-titres et les ajouter à la vidéo. Créer ensuite un second fichier VTT pour avoir les sous-titres en français. Démo des sous-titres