HTML Vidéo
L'élément HTML <video> est utilisé pour afficher une vidéo sur une page web.
Vidéo
L'élément HTML <video>
Pour afficher une vidéo en HTML, utilisez l'élément <video> :
Exemple
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Votre navigateur ne prend pas en charge la balise vidéo.
</video> Comment ça fonctionne
L'attribut controls ajoute des contrôles vidéo, comme lecture, pause et volume.
Il est conseillé d'inclure toujours les attributs width et height . Si la hauteur et la largeur ne sont pas définies, la page peut scintiller pendant le chargement de la vidéo.
L'élément <source> vous permet de spécifier des fichiers vidéo alternatifs parmi lesquels le navigateur peut choisir. Le navigateur utilisera le premier format reconnu.
Le texte entre les balises <video> et </video> ne sera affiché que dans les navigateurs qui ne prennent pas en charge l'élément <video> .
HTML <video> Autoplay
Pour démarrer une vidéo automatiquement, utilisez l'attribut autoplay :
Exemple
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Votre navigateur ne prend pas en charge la balise vidéo.
</video> Remarque : Les navigateurs Chromium ne permettent pas l'autoplay dans la plupart des cas. Cependant, l'autoplay en mode muet est toujours autorisé.
Ajoutez muted après autoplay pour que votre vidéo commence à jouer automatiquement (mais en mode muet) :
Exemple
<video width="320" height="240" autoplay muted>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Votre navigateur ne prend pas en charge la balise vidéo.
</video> Support des navigateurs
Les chiffres dans le tableau spécifient la première version du navigateur qui prend entièrement en charge l'élément <video> .
| Élément | |||||
|---|---|---|---|---|---|
| <video> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
Formats vidéo HTML
Il existe trois formats vidéo pris en charge : MP4, WebM et Ogg. Le support des navigateurs pour les différents formats est :
| Navigateur | MP4 | WebM | Ogg |
|---|---|---|---|
| Edge | OUI | OUI | OUI |
| Chrome | OUI | OUI | OUI |
| Firefox | OUI | OUI | OUI |
| Safari | OUI | OUI | NON |
| Opera | OUI | OUI | OUI |
HTML Vidéo - Types de médias
| Format de fichier | Type de média |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
HTML Vidéo - Méthodes, Propriétés et Événements
Le DOM HTML définit des méthodes, des propriétés et des événements pour l'élément <video> .
Cela vous permet de charger, lire et mettre en pause des vidéos, ainsi que de définir la durée et le volume.
Il existe également des événements DOM qui peuvent vous notifier lorsque la vidéo commence à jouer, est mise en pause, etc.
Pour une référence complète du DOM, rendez-vous sur notre Référence DOM HTML Audio/Video .
Balises vidéo HTML
| Balise | Description |
|---|---|
| <video> | Définit une vidéo ou un film |
| <source> | Définit plusieurs ressources multimédias pour des éléments tels que <video> et <audio> |
| <track> | Définit des pistes de texte dans les lecteurs multimédias |