Vos choix de confidentialité

Le stockage essentiel permet la connexion et le fonctionnement des outils d’apprentissage. Google Analytics mesure les visites ; Microsoft Clarity enregistre les interactions pour améliorer l’ergonomie. Ces deux services sont facultatifs et restent désactivés tant que vous n’avez pas fait votre choix. Lire notre politique de confidentialité.

HTML — Audio et vidéo — Cours HTML | SovranCode

Contenu du coursHTML — Audio et vidéo · 26 leçons

Les bases de HTML

HTML — Introduction HTML — Éditeurs de code HTML — Structure d’un document HTML — En-tête et métadonnées HTML — Éléments et balises HTML — Attributs

Organiser le texte et le contenu

HTML — Titres h1 à h6 HTML — Paragraphes HTML — Mise en forme du texte

Ajouter des liens et des médias

HTML — Liens hypertextes HTML — Images HTML — Images adaptatives HTML — Audio et vidéo HTML — Iframes et intégration de pages

Présenter des listes et des tableaux

HTML — Listes HTML — Tableaux

Créer des formulaires

HTML — Formulaires HTML — Types de champs de saisie HTML — Listes de choix et zones de texte HTML — Boutons HTML — Validation des formulaires

Donner du sens à vos pages

HTML — Éléments sémantiques

Accessibilité et bonnes pratiques

HTML — Accessibilité HTML — Adaptation aux écrans HTML — Conventions d’écriture

Références et mise en pratique

HTML — Référence des éléments

HTML 54 min

HTML — Audio et vidéo

audio et video permettent d’intégrer des médias avec les commandes du navigateur, plusieurs sources, des sous-titres et des transcriptions.

audio et video intègrent des médias avec les commandes natives du navigateur. Plusieurs éléments source peuvent proposer différents formats ; track associe des sous-titres ou des descriptions. Un contenu de repli offre un autre accès à l’information lorsque la lecture est impossible ou ne convient pas.

Prévoir les sources et le contenu de repli

Le navigateur examine les éléments source dans l’ordre et utilise le premier format pris en charge. Précisez le type MIME pour l’aider à choisir sans télécharger tous les fichiers. Le texte placé dans audio ou video s’affiche lorsque l’élément n’est pas pris en charge.

<video controls width="960" poster="html-lesson-poster.jpg" preload="metadata">
  <source src="html-lesson.webm" type="video/webm">
  <source src="html-lesson.mp4" type="video/mp4">
  <track kind="captions" src="html-lesson-en.vtt" srclang="en" label="Anglais" default>
  <p><a href="html-lesson.mp4">Télécharger la vidéo de la leçon HTML</a>.</p>
</video>

Affichez les commandes natives du navigateur.
Proposez des formats largement pris en charge.
Ajoutez des sous-titres pour les paroles et les sons utiles à la compréhension.

<figure>
  <audio controls preload="metadata">
    <source src="semantic-html.ogg" type="audio/ogg">
    <source src="semantic-html.mp3" type="audio/mpeg">
  </audio>
  <figcaption>
    Épisode 4 : le HTML sémantique ·
    <a href="semantic-html-transcript.html">Lire la transcription</a>
  </figcaption>
</figure>

APPROFONDIR ET PRATIQUER · ENVIRON 30 MIN

Comprenez. Créez. Expliquez.

Explorez l’exemple, essayez de corriger le code avant de consulter la solution, puis créez votre propre version.

Les objectifs de cet atelier

Distinguer le format du conteneur et l’encodage lisible par le navigateur
Prévoir des sous-titres et des transcriptions
Prévoir les alternatives et la protection de la vie privée pour les contenus intégrés

Un lecteur a besoin de fichiers utilisables

Un élément video ou audio fournit une interface de lecture, mais le navigateur a besoin d’un fichier accessible dont il sait décoder le contenu. Une extension familière ne garantit pas la lecture dans tous les navigateurs. Plusieurs éléments source proposent des alternatives ; type fournit une indication utile, mais seule une lecture réelle permet de confirmer le résultat.

controls affiche les commandes natives de lecture. preload indique la quantité de données que l’on souhaite charger à l’avance, sans garantir un calendrier de chargement. La lecture automatique avec du son est souvent limitée et peut gêner. Concevez une page qui fonctionne lorsque l’utilisateur lance lui-même la lecture, sans dépendre d’un démarrage automatique.

Des alternatives pour des besoins différents

Les sous-titres restituent les paroles et les sons pertinents, en synchronisation avec la vidéo. Une transcription permet de rechercher et de lire l’information sans utiliser le lecteur. Les informations visuelles absentes de la bande-son peuvent aussi nécessiter une description. Ajouter un élément track vide ne crée aucune de ces ressources.

track pointe vers un véritable fichier de texte synchronisé, souvent au format WebVTT. Vérifiez ses repères temporels avec la version finale du média. Un lecteur tiers dans un iframe introduit un autre document et peut effectuer des requêtes réseau ou stocker des données. Donnez-lui un titre utile, limitez ses capacités selon les besoins et ne considérez pas un service intégré comme l’équivalent d’un fichier vidéo local.

VOTRE ESPACE DE PRATIQUE

Préparer un ensemble de ressources multimédias accessible

Ces chemins relatifs désignent des fichiers à créer dans votre propre dossier d’exercice ; aucune vidéo n’est fournie avec l’exemple. La piste indiquée reste en anglais et doit correspondre à un véritable fichier de sous-titres. L’ensemble comprend aussi la transcription affichée sous le lecteur.

Ouvrir dans un nouvel onglet

Code

<figure>
  <video controls preload="metadata" width="640">
    <source src="media/workshop.webm" type="video/webm">
    <source src="media/workshop.mp4" type="video/mp4">
    <track kind="captions" src="media/workshop-en.vtt" srclang="en" label="Anglais" default>
  </video>
  <figcaption>Créer un document HTML.</figcaption>
</figure>
<p><a href="media/workshop.mp4">Télécharger la vidéo d’exercice</a></p>
<section><h2>Transcription</h2><p>[00:00] Créez un fichier nommé index.html.</p></section>

<figure>
  <video controls preload="metadata" width="640">
    <source src="media/workshop.webm" type="video/webm">
    <source src="media/workshop.mp4" type="video/mp4">
    <track kind="captions" src="media/workshop-en.vtt" srclang="en" label="Anglais" default>
  </video>
  <figcaption>Créer un document HTML.</figcaption>
</figure>
<p><a href="media/workshop.mp4">Télécharger la vidéo d’exercice</a></p>
<section><h2>Transcription</h2><p>[00:00] Créez un fichier nommé index.html.</p></section>

Résultat

Modifiez votre HTML ou votre CSS et comparez le résultat. L’aperçu s’actualise après une courte pause. Les scripts, l’envoi de formulaires et les ressources externes sont bloqués. Les aperçus larges défilent à l’intérieur du panneau. Exécuter le code ne le note pas et ne l’enregistre pas : utilisez les commandes prévues pour cela.

Nom de la version

Vous pouvez conserver cinq versions nommées par exemple. Restaurer une version remplace le code dans l’éditeur sans modifier la version enregistrée. Connectez-vous avant de modifier le code pour enregistrer votre travail sur votre compte. Les brouillons invités restent sur cet appareil.

Chargement du travail enregistré…

Pourquoi cet exemple fonctionne

La liste des sources propose des formats ; elle ne remplace pas les fichiers manquants et ne corrige pas un encodage incompatible.
La piste doit pointer vers un fichier contenant de véritables sous-titres.
La transcription fait partie du contenu de la page : elle reste disponible même lorsque le média ne peut pas être lu.

À VOUS DE CORRIGER

Une vidéo sans commandes de lecture utilisables

Repérez le problème et proposez une correction. Expliquez ce qu’elle améliore dans le document, même si les deux versions se ressemblent à l’écran.

<video src="media/workshop.mp4" autoplay></video>

Afficher la correction et son explication

<video src="media/workshop.mp4" controls preload="metadata"></video>
<p>Transcription : créez index.html, enregistrez-le et ouvrez-le dans votre navigateur.</p>

La correction permet de lancer volontairement la lecture et offre un accès textuel à l’information. Pour une véritable vidéo, ajoutez aussi des sous-titres fidèles et les descriptions nécessaires ; cette courte démonstration ne constitue pas une solution d’accessibilité complète.

À VOUS DE CRÉER

Préparer une démonstration de trente secondes

Utilisez un enregistrement qui vous appartient et préparez ses ressources complémentaires avant de l’intégrer.

Votre plan de réalisation

Créez un court enregistrement local avec un objectif d’apprentissage précis.
Rédigez une transcription et synchronisez un fichier de sous-titres.
Ajoutez les commandes natives et un lien alternatif visible.
Testez sans le son, puis en rendant temporairement le fichier multimédia indisponible.

Vérifiez votre travail

Cette grille vous aide à évaluer votre travail ; elle ne donne pas de note automatique. Enregistrez vos fichiers et vérifiez chaque critère avant de marquer la leçon comme terminée.

Les informations essentielles de la leçon sont disponibles sous forme de texte.
Les sous-titres suivent le rythme réel du média.
Le lecteur s’utilise sans dépendre de la lecture automatique.

Pour aller plus loin : Repérez les informations uniquement visuelles et expliquez comment vous les communiqueriez sans passer par la vue.

Savez-vous expliquer votre choix ?

Répondez d’abord avec vos propres mots, puis comparez votre raisonnement.

Une transcription est-elle identique aux sous-titres ?

Non. Les sous-titres sont synchronisés avec le média ; la transcription est une alternative textuelle autonome. Leurs usages se recoupent, mais restent différents.

Le type indiqué sur source garantit-il la lecture ?

Non. C’est une indication de format. La ressource doit exister et son encodage réel doit être pris en charge.

Vos choix de confidentialité

Les bases de HTML

Organiser le texte et le contenu

Ajouter des liens et des médias

Présenter des listes et des tableaux

Créer des formulaires

Donner du sens à vos pages

Accessibilité et bonnes pratiques

Références et mise en pratique

HTML — Audio et vidéo

Prévoir les sources et le contenu de repli

Concevoir les sous-titres et les transcriptions comme du contenu

Distinguer un fichier multimédia d’une page intégrée

Les erreurs à éviter

Mise en pratique guidée

À retenir

Comprenez. Créez. Expliquez.

Les objectifs de cet atelier

Un lecteur a besoin de fichiers utilisables

Des alternatives pour des besoins différents

Préparer un ensemble de ressources multimédias accessible

Code

Résultat

Pourquoi cet exemple fonctionne

Une vidéo sans commandes de lecture utilisables

Préparer une démonstration de trente secondes

Votre plan de réalisation

Vérifiez votre travail

Savez-vous expliquer votre choix ?

Configurer une vidéo de tutoriel

Code

Résultat

Associer un contenu audio à sa transcription

Code

Résultat

Testez ce que vous avez appris

Testez ce que vous avez appris

Testez ce que vous avez appris

Vérifiez vos acquis