Apprends à intégrer de la vidéo, de l'audio et d'autres médias riches directement dans tes pages web en utilisant des éléments HTML natifs — aucun plugin requis.
L'élément <video> te permet d'intégrer du contenu vidéo directement dans ta page. Avant HTML5, intégrer une vidéo nécessitait des plugins tiers comme Flash. Aujourd'hui, le navigateur le gère nativement.
src — URL du fichier vidéo. Alternativement, utilise des éléments <source> imbriqués pour proposer plusieurs formats.controls — Affiche les contrôles intégrés du navigateur pour lecture/pause, volume et barre de progression. Sans cela, la vidéo apparaît mais les utilisateurs n'ont aucun moyen d'interagir avec elle.autoplay — Démarre la lecture automatiquement. La plupart des navigateurs bloquent l'autoplay sauf si la vidéo est également muted.loop — Rejoue la vidéo en continu.muted — Démarre la vidéo sans son.poster — URL d'une image affichée avant que la vidéo ne démarre (comme une vignette).width / height — Définit les dimensions du lecteur vidéo.preload — Indique la quantité de données à pré-charger : none, metadata, ou auto.Le texte entre les balises ouvrante et fermante <video> est un contenu de secours affiché dans les navigateurs qui ne supportent pas l'élément.
<!-- Video with controls, poster image, and multiple sources -->
<video controls poster="thumbnail.jpg" width="640">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Your browser does not support the video element.
</video>
<!-- Audio with controls -->
<audio controls>
<source src="song.mp3" type="audio/mpeg">
<source src="song.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
<!-- Video with captions -->
<video controls width="640">
<source src="lecture.mp4" type="video/mp4">
<track
src="captions-en.vtt"
kind="subtitles"
srclang="en"
label="English"
default
>
</video>L'élément <audio> fonctionne de manière très similaire à <video>. Il accepte les mêmes attributs controls, autoplay, loop, muted, et preload.
<source> au lieu de src ?Différents navigateurs supportent différents formats de médias. En fournissant plusieurs éléments <source>, le navigateur choisit le premier format qu'il peut lire :
<audio controls>
<source src="track.ogg" type="audio/ogg">
<source src="track.mp3" type="audio/mpeg">
Fallback text for unsupported browsers.
</audio>L'attribut type aide le navigateur à décider rapidement sans télécharger le fichier au préalable. Types courants :
video/mp4, video/webm, video/oggaudio/mpeg (MP3), audio/ogg, audio/wav<track>L'élément <track> ajoute des pistes de texte synchronisées à <video> (ou <audio>). L'utilisation la plus courante concerne les sous-titres et légendes au format WebVTT (fichiers .vtt).
kind — subtitles, captions, descriptions, chapters, ou metadata.srclang — Code de langue (par exemple, en, fr).label — Libellé lisible affiché dans le sélecteur de pistes.default — Active cette piste par défaut.L'élément <iframe> (inline frame) intègre un autre document HTML à l'intérieur de la page actuelle. Il est couramment utilisé pour intégrer :
<iframe
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
width="560"
height="315"
title="YouTube video player"
allowfullscreen
></iframe>sandbox — Restreint ce que la page intégrée peut faire (exécuter des scripts, soumettre des formulaires, naviguer dans la page parente, etc.). Commence de manière restrictive et ajoute des permissions au besoin.allow — Politique de fonctionnalités pour l'iframe (caméra, microphone, géolocalisation, etc.).loading="lazy" — Diffère le chargement jusqu'à ce que l'iframe soit proche du viewport, améliorant les performances.Inclus toujours un attribut title sur les iframes pour l'accessibilité — les lecteurs d'écran l'utilisent pour décrire le contenu intégré.
Pourquoi devrais-tu fournir plusieurs éléments <source> à l'intérieur d'une balise <video> ou <audio> ?