Cours HTML / Intégrer de l’audio, de la vidéo et du contenu externe

Cours HTML

Date de création 2026-10-29 Dernière modification 2026-10-29

HTML peut lire des fichiers médias avec audio et video, ou afficher un autre document à l'intérieur d'une page avec iframe. L'intégration réussie dépend des chemins de fichiers réels et des formats pris en charge. Des contrôles utiles, des sous-titres ou transcriptions, ainsi que la fiabilité des contenus externes sont également importants.

Lire des fichiers audio et vidéo

L'exemple suppose que sample.mp3, sample.mp4 et sample-poster.webp se trouvent à côté du fichier HTML. Pour l'exécuter, fournissez des fichiers que vous êtes autorisé à utiliser et ajustez les noms si nécessaire. Les médias nécessitent également des noms de fichiers, chemins et dimensions corrects, en suivant les principes de Images: img, Texte alternatif et Dimensions.

<audio controls>

  <source src="sample.mp3" type="audio/mpeg">

  Votre navigateur ne prend pas en charge la lecture audio.

</audio>



<video controls width="640" height="360" poster="sample-poster.webp">

  <source src="sample.mp4" type="video/mp4">

  <track src="sample-fr.vtt" kind="captions" srclang="fr"

         label="Sous-titres français" default>

  Votre navigateur ne prend pas en charge la lecture vidéo.

</video>

controls fournit les contrôles de lecture du navigateur, et poster est affiché avant la lecture d'une vidéo. Pour la parole ou les sons significatifs, fournissez des sous-titres précis. Le sample-fr.vtt référencé n'est pas créé automatiquement. Sans ce fichier, les sous-titres ne peuvent pas apparaître.

Un fichier de sous-titres WebVTT est un texte UTF-8. Cet exemple minimal montre une seule indication pour les trois premières secondes ; les sous-titres réels doivent couvrir la parole de la vidéo et les sons importants aux moments appropriés.

WEBVTT



00:00:00.000 --> 00:00:03.000

Bienvenue dans Petit Jardin.

Lorsque des informations importantes sont transmises par audio, fournissez également une transcription textuelle. Permettez aux utilisateurs de lancer la lecture eux-mêmes plutôt que de déclencher automatiquement le son de manière inattendue. Si vous proposez plusieurs formats source, les fichiers sous-jacents doivent réellement utiliser ces formats ; renommer une extension ne convertit pas le média.

Intégrer du contenu externe avec iframe

Un iframe affiche un autre document à l'intérieur de la page actuelle. L'URL ci-dessous est un espace réservé structurel, et non une intégration média fonctionnelle. Remplacez-la par une URL d'intégration officielle fournie par le fournisseur.

<iframe

  src="https://example.com/embed/example"

  title="Présentation du contenu d’exemple"

  width="640" height="360"

  loading="lazy"></iframe>

Le title décrit le but de la frame. Un fournisseur peut interdire l'intégration, même si l'URL normale de sa page fonctionne. Le contenu externe peut affecter la vie privée, les cookies et les performances, donc utilisez uniquement le code d'intégration officiel d'un fournisseur de confiance lorsqu'il apporte une valeur ajoutée. Indiquez le titre ou le contexte de l'élément intégré dans le texte environnant afin que l'article reste compréhensible même s'il ne se charge pas.

Ajustez les médias et testez une frame locale

Une largeur HTML de 640 ne s'adapte pas automatiquement à une fenêtre d'affichage étroite. Mettez ce CSS dans un élément style dans head ou dans une feuille de style liée. La vidéo conserve son ratio intrinsèque ; l'exercice de l'iframe utilise une boîte d'affichage 16:9. Ajustez ce ratio lorsque le contenu intégré nécessite un autre ratio.

video, iframe {
  display: block;
  width: 100%;
  max-width: 640px;
}
video { height: auto; }
iframe {
  height: auto;
  aspect-ratio: 16 / 9;
}

Vous pouvez tester les chemins de cadre, la mise en page et la navigation alternative sans fichier vidéo. Enregistrez ces deux fichiers UTF-8 ensemble. Cet exercice ne dépend d'aucun service externe ni de données personnelles.

embed.html

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Consignes de l’exercice</title>
</head>
<body>
  <h1>Consignes de Petit Jardin</h1>
  <p>Cet exemple local est affiché dans une iframe.</p>
</body>
</html>

frame.html

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Exercice sur les iframes</title>
  <style>
video, iframe {
  display: block;
  width: 100%;
  max-width: 640px;
}
video { height: auto; }
iframe {
  height: auto;
  aspect-ratio: 16 / 9;
}
  </style>
</head>
<body>
  <h1>Lire les consignes</h1>
  <iframe src="embed.html" title="Consignes de Petit Jardin" width="640" height="360"></iframe>
  <p><a href="embed.html">Ouvrir les consignes dans une page séparée</a></p>
</body>
</html>

Ouvrez frame.html et vérifiez le titre et le paragraphe intégrés, puis testez que le cadre s'adapte à une fenêtre de 390px. Suivez également le lien vers la page séparée. Si vous utilisez ultérieurement une intégration externe, vérifiez l'URL officielle de ce fournisseur et sa politique d'intégration.

WebVTT est un format texte qui associe des intervalles de temps avec des sous-titres. Si les sous-titres échouent à partir d'un fichier local, vérifiez d'abord l'existence, l'extension, le codage UTF-8 et les intervalles des sous-titres, puis comparez en servant le HTML, la vidéo et le VTT depuis un même serveur de développement HTTP, avec la même origine. Les restrictions sur les URL de fichiers et les types de médias du serveur peuvent affecter le chargement. Renommer une extension n'est pas une conversion de média.

<p><a href="sample.mp4">Ouvrir le fichier vidéo d’exemple</a></p>
<p><a href="transcript.html">Lire la transcription de la vidéo</a></p>

Dirigez les alternatives vers des fichiers et une transcription que vous avez réellement préparée. Le texte de secours à l'intérieur de l'audio/vidéo est destiné aux navigateurs qui ne prennent pas en charge l'élément ; ce n'est pas un message d'erreur garanti d'apparaître lorsqu'un navigateur compatible ne peut pas charger un fichier. Gardez les alternatives et les transcriptions nécessaires disponibles également en dehors du lecteur.

Si le média ne se lit pas ou ne s'adapte pas

Vérifiez que le fichier existe au chemin spécifié et que le serveur envoie le type de média approprié.
Vérifiez si le navigateur prend en charge le codage réel du fichier, pas seulement son extension de nom de fichier.
Utilisez le CSS pour limiter la largeur sur les petits écrans sans déformer le rapport d'aspect de la vidéo.
Pour le contenu externe, vérifiez la politique d'intégration et les conditions du fournisseur.

Consultez la référence vidéo MDN et la référence iframe pour les attributs spécifiques aux éléments. Appliquez la portée des tests manuels dans Bases de l'accessibilité : titres, liens, images et clavier aux commandes de lecture, aux liens alternatifs et à l'utilisation du clavier.

Cours HTML