🎬 Le cours : intégrer des médias
Une page moderne mêle texte, images, sons, vidéos et dessins. HTML5 sait tous les intégrer directement, sans installer de plugin. Cette fiche passe en revue les balises de médias et quelques composants interactifs qui évitent d'écrire du JavaScript.
Audio et vidéo
| Attribut | Effet |
|---|
controls | affiche les commandes ; sans lui, rien n'est visible pour l'audio |
autoplay | lance la lecture au chargement ; les navigateurs le bloquent si le son est actif, il faut muted |
muted | son coupé au départ |
loop | relit en boucle |
preload="none" | ne télécharge rien avant le clic (économise des données) |
poster | image affichée avant la lecture (vidéo) |
width height | dimensions de la vidéo ; réserve la place dans la page |
Tous les navigateurs ne lisent pas les mêmes formats. On propose donc plusieurs <source> du plus récent au plus compatible : MP4 (H.264) est lu presque partout, WebM est plus léger. Le texte placé entre les balises ne s'affiche que si aucun format ne convient.
Accessibilité des médias
Une vidéo ou un son n'est pas accessible à tout le monde. Ajoute des sous-titres (<track kind="subtitles">, fichier .vtt) et, si possible, une transcription textuelle. C'est aussi utile dans un couloir bruyant ou sans casque.
Images adaptatives : picture et srcset
Un téléphone n'a pas besoin d'une image de 1600 pixels de large. srcset propose plusieurs versions (avec leur largeur en pixels, suffixe w) et sizes dit quelle largeur l'image occupera : le navigateur choisit la plus adaptée. <picture> permet de changer d'image (recadrage) selon la taille de l'écran.
<picture>
<source media="(min-width: 800px)" srcset="banniere-large.webp">
<img src="banniere-petite.webp" alt="Bannière du cours NSI" width="400" height="120">
</picture>
<img src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
sizes="(min-width: 800px) 50vw, 100vw"
alt="Salle informatique" width="800" height="533">
Intégrer une autre page : iframe
Un <iframe> affiche une autre page dans un cadre : une carte, une vidéo hébergée ailleurs, une démonstration. Donne-lui toujours un title (lu par les lecteurs d'écran) et des dimensions. Ce que contient la page intégrée échappe à ton contrôle : sandbox restreint ses pouvoirs et loading="lazy" retarde son chargement.
<iframe src="plan.html" title="Plan du lycée" width="400" height="300" loading="lazy"></iframe>
Volets dépliables : details et summary
<details> est un volet fermé par défaut ; <summary> en est le titre cliquable. L'attribut open le déplie au chargement. C'est idéal pour une FAQ, sans une ligne de JavaScript, et c'est accessible au clavier.
progress et meter
<progress> représente l'avancement d'une tâche (téléchargement, chapitre terminé). <meter> représente une mesure dans un intervalle connu (charge d'une batterie, note sur 20) et change de couleur selon low, high et optimum. Ne confonds pas les deux : une barre de progression avance dans le temps, une jauge n'est qu'un niveau.
Dessiner : SVG ou canvas ?
SVG décrit des formes (<circle>, <rect>, <path>) sous forme d'éléments HTML : le dessin reste net à toute taille, chaque forme est stylable en CSS et accessible au DOM. <canvas> est une surface de pixels sur laquelle JavaScript dessine, adaptée aux jeux et aux animations lourdes.
<svg width="120" height="120" viewBox="0 0 120 120" role="img" aria-label="Cercle rouge sur fond clair">
<rect width="120" height="120" fill="#f1f5f9"/>
<circle cx="60" cy="60" r="40" fill="#ef4a34"/>
</svg>
RenduUn cercle rouge centré dans un carré clair de 120 pixels.
<canvas id="zone" width="200" height="100"></canvas>
<script>
const ctx = document.getElementById("zone").getContext("2d");
ctx.fillStyle = "#2563eb";
ctx.fillRect(20, 20, 160, 60);
</script>
RenduUn rectangle bleu de 160 pixels sur 60, dessiné par JavaScript.
Poids et droits
- Compresse les images et les vidéos avant de les publier : un média de plusieurs dizaines de mégaoctets ruine la page sur téléphone.
- Précise les dimensions (
width, height) pour que la page ne « saute » pas pendant le chargement.
- N'utilise que des médias dont tu as le droit : les siens, ou sous licence libre en citant l'auteur.
