15. Insertion d'audio et de vidéo
Le HTML5 a introduit des éléments standards pour insérer des médias sans dépendre de plugins tiers (comme Flash).
15.1 L'élément vidéo (<video>)
L'élément <video> insère un fichier vidéo. Il utilise généralement l'attribut controls pour afficher les boutons de lecture standards.
html <video width="640" height="360" controls> <source src="assets/intro-video.mp4" type="video/mp4"> <source src="assets/intro-video.webm" type="video/webm"> <!-- Texte de secours si le navigateur ne supporte pas la balise vidéo --> Votre navigateur ne supporte pas la balise vidéo. </video>
Pourquoi plusieurs balises <source> ?
Les navigateurs supportent différents formats vidéo (MP4, WebM, OGG). Fournir plusieurs sources garantit la compatibilité. Le navigateur les essaiera dans l'ordre jusqu'à ce qu'il en trouve une qu'il puisse lire.
15.2 L'élément audio (<audio>)
L'élément <audio> fonctionne de manière similaire mais n'a pas besoin de spécifications de largeur/hauteur.
html <audio controls> <source src="assets/background-music.mp3" type="audio/mp3"> <source src="assets/background-music.ogg" type="audio/ogg"> Votre navigateur ne supporte pas l'élément audio. </audio>
15.3 Attributs importants
| Attribut | Description |
|---|---|
controls | Affiche les commandes du lecteur (lecture/pause, volume, etc.). |
autoplay | Lance automatiquement la lecture (souvent bloqué par les navigateurs). |
loop | Fait redémarrer le média automatiquement une fois terminé. |
muted | Coupe le son par défaut. |