Thibault Liétard.

PhD Student in Computer Science

L3-SEGE - Informatique 3 : Internet : Langages et Programmation - HTML5 et multimédia

D'après un cours de Dominique Gonzalez

Rappels

Nous avons pu voir plusieurs balises introduites par HTML5 qui apportent de nouvelles fonctionnalités et une nouvelle sémantique pour programmer en HTML :

  • main : Définit le contenu principal de la page, il doit être unique dans la page.
  • section : Section générique regroupant un même sujet, une même fonctionnalité, de préférence avec un en-tête, ou bien section d'application web.
  • nav : Section possédant des liens de navigation principaux (au sein du document ou vers d'autres pages).
  • article : Section de contenu indépendante, pouvant être extraite individuellement du document ou syndiquée (flux RSS ou équivalent), sans pénaliser sa compréhension.
  • aside : Section dont le contenu est un complément par rapport à ce qui l'entoure, qui n'est pas forcément en lien direct avec le contenu mais qui peut apporter des informations supplémentaires.
  • hgroup : La balise <hgroup> n'existe plus en HTML5 (février 2013). Eh oui, ce sont des choses qui arrivent quand on travaille sur un truc pas entièrement finalisé.
  • mark : Définit un texte marqué. Surligneur de texte.
  • header : Section d'introduction d'un article, d'une autre section ou du document entier (en-tête de page).
  • footer : Section de conclusion d'une section ou d'un article, voire du document entier (pied de page).

Mais ce n'est pas tout ! HTML5 apporte également de nouvelles fonctionnalités en ce qui concerne l'utilisation de supports multimédia.

Les images

Nous avons déjà vu qu'il était possible d'insérer une image dans une page HTML à l'aide de la balise "img".

<img src="url_de_l'image" alt="description de l'image"/>

Deux attributs sont obligatoires : "src", qui donne l'adresse (locale ou en ligne) de l'image, et "alt", qui donne une description rapide de l'image et qui sera affichée si l'image ne peut pas être chargée.

Les formats d'image acceptés sont le GIF, le PNG, le JPG (ou JPEG) et le SVG.

Par exemple, pour inclure sur mon site l'image se situant à l'adresse "https://upload.wikimedia.org/wikipedia/commons/6/6f/Beethoven.jpg" je dois écrire le code suivant :

<div class="image">
    <img src="https://upload.wikimedia.org/wikipedia/commons/6/6f/Beethoven.jpg" alt="Beethoven">
</div>

Notez que l'image est dans une div de classe "image" car par défaut une balise "img" est de type "inline", c'est à dire que certaines propriétés telles que le fait de l'alignement n'existe pas sur cette balise. On crée donc une div spécifique pour pouvoir y appliquer les propriétés souhaitées. Cela donne :

Beethoven

avec le code CSS suivant :

.image {
    display:block;
    text-align:center;
}
.image img {
    width : 50%;
}

Audio

Avant HTML5, c'était compliqué. Maintenant, c'est simple comme une balise : la balise <audio>.

<audio attributs_éventuels>
    <source src="URL_d_un_fichier_son" type="format_audio">
  Votre navigateur n'est pas compatible avec la balise AUDIO.
</audio>

Les formats pris en charge sont audio/mpeg, audio/ogg et audio/wav. Les attributs possibles sont :

  • autoplay : Attribut booléen. Si celui-ci est renseigné (même avec une valeur "false"), l'élément audio sera joué automatiquement dès qu'assez de données seront chargées.
  • controls : Si l'attribut est présent, le navigateur affichera des contrôles pour que l'utilisateur puisse gérer la lecture, le volume, et le déplacement du curseur de lecture.
  • loop : Attribut booléen. S'il est renseigné, la lecture du fichier se fera en boucle.
  • volume : Le volume de la partie audio, fournie comme une valeur flottante comprise entre 0.0 (silencieux) et 1.0 (le volume le plus élevé).

Par exemple, le code pour obtenir un lecteur pour le premier mouvement de la Sonate "Au Clair de Lune" de Beethoven disponible sur internet à l'adresse "http://www.symphozik.info/multi/beethoven/3.mp3" serait :

<audio controls volume="0.5">
    <source src="http://www.symphozik.info/multi/beethoven/3.mp3" type="audio/mpeg">
  Votre navigateur n'est pas compatible avec la balise AUDIO.
</audio>

Ce qui donne:

Ou alors, avec un peu de CSS :

Vidéo

Très similairement à la façon dont on utilise la balise <audio>, on utilisera la balise <video>.

<video attributs_éventuels>
    <source src="URL_d_un_fichier_video" type="format_video">
  Votre navigateur n'est pas compatible avec la balise VIDEO.
</video>

Les formats pris en charge sont video/mp4, video/ogg et video/WebM. Les attributs possibles sont :

Par exemple, le code pour voir la video du premier mouvement de la Sonate "Au Clair de Lune" de Beethoven disponible sur mon ordinateur à l'adresse "media/sonate.mp4" serait :

<video controls>
    <source src="media/sonate.mp4" type="video/mp4">
  Votre navigateur n'est pas compatible avec la balise VIDEO.
</audio>

"Mais Monsieur", me direz vous, "ça ne marche pas avec les vidéos youtube..."

Le cas des vidéos youtube est à la fois un peu particulier et beaucoup plus simple. Faites un clic-droit sur la vidéo, puis "copier le code d'intégration", et dans votre document HTML faites clic-droit + coller. Vous devriez obtenir un code de ce style :

<iframe width="1280" height="720" src="https://www.youtube.com/embed/TesdiZ7LMqs" frameborder="0" allowfullscreen></iframe>

Ce qui donne :

Avec éventuellement les règlages de "width" et "height" qui s'imposent

Exercice

Nous allons retravailler sur le projet de site web professionnel que nous avez du rendre pour le 9 février. Créez y une nouvelle page sur laquelle vous présenterez vos hoobies. Vous y ajouterez un son et une video illustrant l'un de ces hobbies.

Vous pouvez télécharger un son ici : lasonoteque.org. Une fois que vous l'aurez téléchargé, il s'agira donc d'un fichier local.

Pour la video, vous utiliserez une vidéo issue de youtube.