Insérer de l'audio et de la vidéo

Ajouter du son avec la balise audio

La balise audio est une balise double. L’attribut controls est indispensable : sans lui, le lecteur est invisible et l’utilisateur n’a aucun moyen de lancer la lecture.

<!-- Insertion simple : un seul fichier -->
<audio controls src="sons/musique.mp3"></audio>

Les formats audio

Tous les navigateurs ne supportent pas les mêmes formats. En pratique, le MP3 est aujourd’hui universel, mais il est bon de connaître les alternatives.

Les attributs de la balise audio

<!-- Lecteur simple -->
<audio controls src="sons/musique.mp3"></audio>

<!-- Lecteur avec lecture en boucle et préchargement des métadonnées -->
<audio controls loop preload="metadata" src="sons/ambiance.mp3"></audio>

Gérer la compatibilité avec la balise source

Pour maximiser la compatibilité, on peut proposer plusieurs formats. Le navigateur lit les balises source de haut en bas et utilise le premier format qu’il reconnaît. L’attribut type aide le navigateur à identifier le format sans télécharger le fichier.

<!-- Plusieurs formats pour une compatibilité maximale -->
<audio controls>
  <source src="sons/musique.mp3" type="audio/mpeg">
  <source src="sons/musique.ogg" type="audio/ogg">
  <!-- Texte de repli pour les très vieux navigateurs -->
  <p>Votre navigateur ne supporte pas la lecture audio.
     <a href="sons/musique.mp3">Téléchargez le fichier</a>.</p>
</audio>

Insérer de la vidéo avec la balise video

Le fonctionnement est identique à celui de la balise audio : une balise double, l’attribut controls pour afficher le lecteur, et la possibilité de proposer plusieurs formats via source.

<!-- Insertion simple -->
<video controls src="videos/presentation.mp4"></video>

Les formats vidéo

En pratique, un fichier MP4 (H.264) suffit dans la grande majorité des cas. Ajoutez une version WebM si vous visez une compatibilité maximale ou si vous privilégiez les formats libres.

Les attributs de la balise video

La balise video partage les mêmes attributs que audio (controls, autoplay, loop, muted, preload), avec quelques attributs supplémentaires :

<!-- Lecteur vidéo avec image d'aperçu et dimensions définies -->
<video controls
     width="640"
     height="360"
     poster="images/apercu-video.jpg">
  <source src="videos/presentation.mp4" type="video/mp4">
  <source src="videos/presentation.webm" type="video/webm">
  <p>Votre navigateur ne supporte pas la lecture vidéo.
     <a href="videos/presentation.mp4">Téléchargez la vidéo</a>.</p>
</video>

Intégrer une vidéo externe (YouTube, Vimeo…)

Dans la pratique, beaucoup de vidéos sont hébergées sur des plateformes tierces ce qui soulage votre serveur et garantit une page rapidement chargée. Pour les intégrer, vous utilisez la balise iframe et le code d’intégration fourni par la plateforme (bouton “Partager” → “Intégrer”).

<!-- Code d'intégration YouTube -->
<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/ID_DE_LA_VIDEO"
  title="Titre descriptif de la vidéo"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen>
</iframe>

• L’attribut title est indispensable pour l’accessibilité — il décrit le contenu de l’iframe aux lecteurs d’écran
• L’attribut allowfullscreen permet à l’utilisateur de passer en plein écran
• Remplacez ID_DE_LA_VIDEO par l’identifiant trouvé dans l’URL YouTube (après v=)

Bonnes pratiques

Accessibilité

• Toujours ajouter controls : un contenu audio ou vidéo doit pouvoir être mis en pause, relancé et ajusté en volume par l’utilisateur
• Éviter autoplay : un média qui se lance tout seul est intrusif, perturbant pour les lecteurs d’écran, et bloqué par les navigateurs modernes
• Ajouter un poster sur les vidéos pour donner un aperçu visuel
• Proposer un texte de repli entre les balises audio/video pour les navigateurs qui ne les supportent pas
• Sous-titrer ses vidéos : la balise track permet d’ajouter des sous-titres au format WebVTT

<!-- Ajouter des sous-titres à une vidéo -->
<video controls poster="images/apercu.jpg">
  <source src="videos/interview.mp4" type="video/mp4">
  <track src="sous-titres/interview-fr.vtt"
         kind="subtitles"
         srclang="fr"
         label="Français"
         default>
</video>

Performance et sobriété

• Compresser ses fichiers avant de les mettre en ligne : un outil comme HandBrake (vidéo) ou Audacity (audio) permet de réduire considérablement le poids sans perte perceptible
• Utiliser preload="metadata" plutôt que preload="auto" pour éviter de télécharger un fichier lourd que l’utilisateur ne lira peut-être pas
• Privilégier l’hébergement externe (YouTube, Vimeo) pour les vidéos lourdes — votre serveur et vos visiteurs vous remercieront
• Se poser la question : cette vidéo en autoplay est-elle vraiment nécessaire ? Chaque média pèse sur le temps de chargement et l’empreinte carbone de la page