TP 13 : Interactivité en CSS — Audio & vidéo

Licence Informatique/Maths 1ère année

Alexandre Niveau — Jean-Marc Lecarpentier

Enseignement des technologies du Web

 

Travail personnel

Objectifs

Dans ce TP, on montre comment il est possible d'utiliser les sélecteurs avancés en pratique pour ajouter des éléments interactifs, et on manipule au passage les éléments HTML audio et video, qui changent un peu des habituels textes et images.

Exercice 1 — Cris d’animaux #

Adapté d’un exercice de Françoise Lambert et Frédéric Jurie

Cet exercice fait partie de ceux qui seront évalués. La page doit être accessible et fonctionnelle à l'URL suivante :

https://dev-LOGIN.users.info.unicaen.fr/TW1-2022/TP13/ex1/cris-animaux.html
(en remplaçant LOGIN par votre nom de login). Pensez à vérifier la validité W3C de votre page !

D'autre part, l'élément head doit contenir le code suivant :

<meta name="author" content="LOGINS" />
en remplaçant LOGINS par les noms de login des étudiant·e·s qui ont travaillé sur cette page, séparés par des virgules. (Il faut laisser name="author" tel quel, par contre !) Par exemple, si dupont210 et durand212 ont travaillé ensemble, ils mettent <meta name="author" content="dupont210,durand212" /> dans le head de leur page. Ça permettra à notre script de savoir qui a travaillé avec qui.

Il est conseillé de vérifier que l'exercice a été correctement rendu en utilisant l'application evalweb.

Vous avez jusqu'au début du TP de la semaine suivante pour terminer l'exercice.

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

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

Capture d’écran de la page
Capture d’écran de la page
(cliquer pour accéder à l’image pleine taille)
  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. La police de caractère s'appelle Purisa, elle est fournie sous la forme d'un fichier woff. Pour l'utiliser, il faut d'abord la déclarer dans le CSS avec une règle spéciale @font-face (voir le cours sur les polices). On peut ensuite l'utiliser sur n'importe quel élément avec la propriété font-family (comme n'importe quelle police).
  4. Mettre en place les 4 contrôleurs de sons (sans les lier aux fichiers pour l'instant). Attention, pour la validation W3C, une balise audio ne doit pas être mise dans une balise figure…
  5. Vous trouverez dans l’archive des fichiers sons de différents formats : .ogg, .wav, .mp3. Tous les formats ne sont pas forcément reconnus par tous les navigateurs : en en mettant plusieurs on maximise les chances que ça fonctionne pour tout le monde. Pour mettre plusieurs formats différents pour chaque animal, on place plusieurs éléments source à l'intérieur de l'élément audio ; le navigateur prendra le premier qu'il sait lire. Regardez dans les docs comment utiliser source, ajoutez toutes les versions disponibles, et vérifiez que tout marche sur plusieurs navigateurs (par exemple Firefox, Chrome, Opera, Edge, Safari, et le navigateur de votre smartphone). En pratique, à l'heure actuelle (2020), les mp3 sont reconnus quasiment partout, mais c'est un format non libre ; le format libre ogg est reconnu par tout le monde sauf Safari et ses variantes.
  6. Testez rapidement les paramètres autoplay puis loop, mais retirez les ensuite sous peine d’énervement général !
  7. Rajoutez un effet « sous-titre » sur le titre : en survolant le titre un sous-titre apparaît, comme sur la capture d'écran suivante.
    Effet sur le titre
    Effet sur le titre
    (cliquer pour accéder à l’image pleine taille)
    Le principe est de cacher le sous-titre dans le CSS (avec display: none), et de l'afficher (avec display: block) lorsque le titre est survolé. Si vous ne voyez pas comment changer une propriété d'un élément lors du survol d'un autre élément, retournez voir la page de cours sur l'interactivité en CSS.
  8. Rajoutez les effets suivants au survol de chaque figure :
  9. 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, qui fonctionne de façon très similaire à audio. Là encore, pour être supporté par le maximum de navigateurs, il faut mettre les deux formats.
  10. Testez l'attribut poster de l'élément video avec l'image paw-print.png (répertoire images/ de l'archive).