La balise vidéo permet d'afficher un fichier vidéo directement dans une page HTML5. Vous allez voir pas à pas comment l'utiliser, quels attributs lui ajouter et dans quels cas elle est plus adaptée qu'un service externe.
Pourquoi utiliser une balise vidéo plutôt qu'un service comme YouTube ?
Quand vous intégrez une vidéo YouTube, vous insérez en réalité un lecteur externe dans votre page. C'est pratique, mais vous ne maîtrisez pas totalement l'affichage, les suggestions ou le comportement du lecteur.
Avec la balise <video>, c'est vous qui choisissez le fichier, les contrôles visibles, l'image d'attente et plusieurs réglages de lecture. C'est souvent une bonne solution quand vous voulez garder un lecteur simple et bien intégré à votre page.
En revanche, héberger vos propres vidéos demande aussi un peu plus d'attention. Les fichiers vidéo sont souvent lourds et tous les formats ne sont pas lus de la même manière selon les navigateurs.
Introduction à la balise vidéo
La balise <video> fonctionne avec une balise ouvrante et une balise fermante. Entre les deux, on place généralement une ou plusieurs balises <source>.
<video>
<source src="../images/exemple-video.mp4" type="video/mp4" />
Votre navigateur ne prend pas en charge la lecture vidéo HTML5.
</video>
La balise <source> indique au navigateur où se trouve le fichier et de quel type de vidéo il s'agit. Entre <video> et </video>, vous pouvez aussi ajouter un contenu de secours.
On appelle cela un fallback. Si la vidéo ne peut pas être lue, ou si le navigateur ne gère pas correctement cette balise, ce texte pourra s'afficher à la place. C'est une solution simple pour éviter de laisser l'utilisateur sans information.
Ici, le lecteur vidéo s'affiche avec ses contrôles et charge le fichier exemple-video.mp4.
Les différents formats de vidéos acceptés
Le format le plus courant aujourd'hui est le .mp4. C'est souvent celui qu'on utilise en premier, car il est largement pris en charge.
Il existe aussi d'autres formats comme :
-
.mp4 -
.webm -
.ogg
En pratique, ces formats n'ont pas tous les mêmes avantages :
Le format MP4
C'est le format le plus simple à utiliser dans un cours ou sur un site classique. Il est très bien pris en charge par les navigateurs modernes, il offre un bon compromis entre qualité et poids, et il reste aujourd'hui le meilleur choix par défaut.
Le format WebM
C'est un format ouvert, souvent très intéressant pour le web. Il peut donner d'excellents résultats en compression, mais il a longtemps été moins bien pris en charge par Safari. La situation s'est beaucoup améliorée, mais le MP4 reste souvent plus rassurant si vous voulez viser la compatibilité maximale.
Le format Ogg
C'est aussi un format ouvert, mais il est aujourd'hui beaucoup moins utilisé. Son principal inconvénient est sa compatibilité plus limitée. On le rencontre donc rarement dans les projets actuels.
Compatibilité des formats sur les différents navigaeurs
Compatibilité du MP4 : le format MP4 est compatible avec tous les grands navigateurs modernes, notamment Chrome, Edge, Safari, Firefox et leurs versions mobiles.
Compatibilité du WebM : le format WebM est compatible dans Chrome, Edge, Firefox et Opera, ainsi que dans les versions récentes de Safari et de Safari sur iPhone et iPad. Sur d'anciens appareils Apple, la prise en charge peut être partielle ou absente.
Compatibilité du Ogg : le format Ogg a une compatibilité nettement plus faible. Il n'est pas pris en charge par Safari et il est désormais mal ou plus du tout pris en charge par plusieurs navigateurs récents. Il ne faut donc pas compter dessus comme solution principale.
Pour améliorer la compatibilité, on peut proposer plusieurs sources. Le navigateur choisira la première qu'il sait lire.
<video controls>
<source src="videos/presentation.mp4" type="video/mp4" />
<source src="videos/presentation.webm" type="video/webm" />
<source src="videos/presentation.ogv" type="video/ogg" />
Votre navigateur ne prend pas en charge la lecture vidéo HTML5.
</video>
Attention ! Le mot affiché dans le nom du fichier n'est pas suffisant. Il faut aussi indiquer un type cohérent dans l'attribut type.
Gestion de la taille de la balise
Comme pour une image, vous pouvez définir la taille du lecteur avec les attributs width et height.
<video width="640" height="360" controls>
<source src="../images/exemple-video.mp4" type="video/mp4" />
</video>
Vous n'êtes pas obligé de préciser les deux. Très souvent, width suffit, et le navigateur adapte la hauteur selon les proportions de la vidéo.
Avec une largeur fixée à 320 pixels, le lecteur devient plus petit dans la page.
Afficher une image d'attente en attendant la lecture de la vidéo
Avant de lancer la lecture, vous pouvez afficher une image d'attente. Cette image s'appelle souvent une miniature ou un aperçu.
Pour cela, on utilise l'attribut poster.
<video controls poster="../images/banner.jpg">
<source src="../images/exemple-video.mp4" type="video/mp4" />
</video>
Cet attribut est très utile pour éviter d'afficher un lecteur vide ou un écran noir avant le démarrage de la vidéo.
Afficher les boutons de contrôle
Si vous voulez laisser l'utilisateur lancer, mettre en pause ou avancer dans la vidéo, vous devez ajouter l'attribut controls.
<video controls>
<source src="../images/exemple-video.mp4" type="video/mp4" />
</video>
Cet attribut n'a pas de valeur particulière à écrire. Sa simple présence suffit.
Sans controls, la vidéo peut exister dans la page, mais l'utilisateur ne verra pas les boutons habituels du lecteur.
L'attribut autoplay pour lire une vidéo automatiquement
L'attribut autoplay demande au navigateur de démarrer la lecture automatiquement.
<video autoplay muted>
<source src="../images/exemple-video.mp4" type="video/mp4" />
</video>
Dans la pratique, beaucoup de navigateurs bloquent l'autoplay si la vidéo contient du son. C'est pourquoi on voit souvent autoplay accompagné de muted.
Attention ! Une vidéo qui démarre toute seule peut gêner la lecture de votre page. Utilisez cet attribut seulement quand cela a un vrai intérêt.
Muter le son d'une vidéo avec muted
Pour couper le son d'une vidéo dès le départ, on utilise l'attribut muted.
<video muted controls>
<source src="../images/exemple-video.mp4" type="video/mp4" />
</video>
On parle parfois de "mute", mais en HTML le nom exact de l'attribut est bien muted.
Lire en boucle une vidéo avec l'attribut loop
Si vous voulez que la vidéo recommence automatiquement à la fin, il faut utiliser l'attribut loop.
Par exemple, vous pouvez l'utiliser pour une petite animation d'arrière-plan, un logo animé ou une courte démonstration visuelle qui doit tourner en continu.
<video autoplay muted loop>
<source src="../images/exemple-video.mp4" type="video/mp4" />
</video>
Cet attribut est souvent utilisé pour de petites vidéos décoratives ou des animations courtes.
Ici, la vidéo se relance automatiquement dès qu'elle atteint la fin.
L'attribut playsinline
Sur certains mobiles, une vidéo peut se lancer automatiquement en plein écran. L'attribut playsinline demande au navigateur de lire la vidéo directement dans la page, sans passer en affichage plein écran.
<video autoplay muted playsinline>
<source src="../images/exemple-video.mp4" type="video/mp4" />
</video>
Cet attribut est particulièrement utile pour les vidéos intégrées dans une mise en page mobile.
Gestion du préchargement de la vidéo avec preload
L'attribut preload indique au navigateur comment préparer la vidéo avant que l'utilisateur clique dessus.
Les valeurs les plus courantes sont :
-
none: ne rien charger à l'avance -
metadata: charger seulement les informations de base -
auto: laisser le navigateur charger davantage si nécessaire
<video controls preload="metadata">
<source src="../images/exemple-video.mp4" type="video/mp4" />
</video>
Si votre vidéo est lourde, éviter un préchargement trop agressif peut améliorer les performances de la page.
Retenez surtout ceci : une intégration vidéo simple repose souvent sur controls, un format .mp4 bien choisi, une image poster et, sur mobile, un usage pertinent de muted et playsinline.