HTML 5 - 3.3 : Créer un lecteur audio et vidéo

Bienvenue dans ce cours d'HTML5. Cette leçon explique comment créer un lecteur audio et un lecteur vidéo natifs. Commençons par le lecteur audio. Vous aurez besoin d'un fichier MP3. Sous votre titre h2, ajoutez une balise <audio> avec une source pointant vers le fichier audio, par exemple src="resources/welcome.mp3". Définissez ensuite une largeur (par exemple 50 %) et une hauteur en pixels. Cependant, au chargement, le lecteur ne s'affiche pas ! C'est tout à fait normal : il manque l'attribut controls, sans valeur, qui active les boutons lecture, pause, stop et volume.

Attributs audio et lecteur vidéo

L'attribut autoplay permet de jouer le fichier audio automatiquement au chargement de la page. L'attribut preload définit ce qu'il faut charger initialement : auto charge tout le fichier, none ne charge rien, et metadata ne charge que les métadonnées (durée, format). Ce dernier choix est souvent le meilleur compromis entre performance et expérience utilisateur.

Passons au lecteur vidéo. De la même manière, ajoutez une balise <video src="movie.mp4" width="100%" controls> sous votre titre h3. Vous obtenez votre vidéo avec les contrôles : lecture, plein écran, volume. Vous pouvez ajouter une image d'aperçu via l'attribut poster : poster="images/cover.jpg". La première frame affichée avant lecture sera cette image.

Astuce importante : pour garantir la compatibilité entre navigateurs et appareils (Android, iOS, Chrome, Safari), on peut fournir plusieurs sources à la balise <video>. Remplacez l'attribut src par des balises <source> à l'intérieur :

<video controls width="100%">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
</video>

Le navigateur choisit alors la source qu'il peut lire. Par exemple, un téléphone iOS qui ne lisait pas le format MP4 spécifique pourra lire le WebM, et inversement. Cette approche garantit que la vidéo fonctionnera sur le maximum d'appareils. Le résultat visuel à l'écran est identique, mais la compatibilité est nettement améliorée. Voilà comment intégrer des lecteurs audio et vidéo natifs en HTML5 !

En résumé

Ce cours démontre comment créer des lecteurs audio et vidéo natifs en HTML5 en utilisant les balises audio et video. Il explique les attributs essentiels (controls, autoplay, preload, poster) et montre comment utiliser plusieurs balises source pour proposer différents formats et garantir la compatibilité cross-navigateur.

Points clés

Utiliser la balise audio pour intégrer des fichiers audio (MP3) avec l'attribut src pointant vers le fichier média
L'attribut controls affiche les boutons de contrôle (lecture, pause, volume, etc.) du lecteur audio et vidéo
La balise video fonctionne de manière similaire pour les fichiers vidéo (MP4) avec possibilité de définir une taille (width/height)
L'attribut preload contrôle le chargement du média : 'auto' (charge tout), 'metadata' (charge les métadonnées), 'none' (ne charge rien)
L'attribut poster définit une image d'affiche affichée avant la lecture de la vidéo
Utiliser plusieurs balises source imbriquées permet d'offrir plusieurs formats (MP4, WebM) pour assurer la compatibilité sur tous les navigateurs et appareils mobiles

Questions fréquentes

À quoi sert l'attribut controls en HTML5 ?

L'attribut controls affiche les boutons de contrôle natifs du navigateur (lecture, pause, curseur de progression, volume, plein écran) permettant à l'utilisateur de gérer la lecture du fichier audio ou vidéo.

Pourquoi proposer plusieurs sources vidéo avec différents formats ?

Différents navigateurs et appareils (iOS, Android, desktop) supportent des formats vidéo différents. En fournissant plusieurs formats (MP4, WebM), vous garantissez que le navigateur de l'utilisateur trouvera au minimum un format lisible, assurant une expérience compatible sur tous les appareils.

Quelle est la différence entre autoplay et preload ?

autoplay lance automatiquement la lecture dès le chargement de la page, tandis que preload détermine si et comment le fichier média est chargé au chargement de la page (auto pour charger entièrement, metadata pour les métadonnées seulement, ou none pour ne rien charger).