HTML Vidéo
L'élément HTML <video> est utilisé pour afficher une vidéo sur une page Web.
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">
Your browser does not support the video tag.
</video>
Try it Yourself »
Comment ça marche
L'attribut controls ajoute des commandes vidéo, comme la lecture, la pause et le volume.
C'est une bonne idée de toujours inclure 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 le font pas. prend en charge l'élément <video>.
HTML <video> Autoplay (Lecture automatique)
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">
Your browser does not support the video tag.
</video>
Try it Yourself »
Remarque : Les navigateurs Chromium n'autorisent pas la lecture automatique dans la plupart des cas. Cependant, la lecture automatique en sourdine est toujours autorisée.
Ajoutez muted après la autoplay pour permettre à votre vidéo de démarrer 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">
Your browser does not support the video tag.
</video>
Try it Yourself »
Prise en charge du navigateur
Les numéros 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 |
HTML Formats vidéo
Il existe trois formats vidéo pris en charge : MP4, WebM et Ogg. Le support du navigateur pour les différents formats est :
| Browser | MP4 | WebM | Ogg |
|---|---|---|---|
| Edge | YES | YES | YES |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | YES | NO |
| Opera | YES | YES | YES |
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 les méthodes, propriétés et é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 avertir lorsqu'une vidéo commence à jouer, est mise en pause, etc.
Pour une référence DOM complète, rendez-vous sur notre Référence HTML Audio/Vidéo DOM.
HTML Balises vidéo
| Balise | Description |
|---|---|
| <video> | Définir une vidéo ou un film |
| <source> | Définit plusieurs ressources multimédias pour les éléments multimédias, tels que <video> et <audio> |
| <track> | Définit les pistes de texte dans les lecteurs multimédias |
