Vidéo HTML
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' <video>élément :
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>
Comment ça fonctionne
L' controlsattribut ajoute des contrôles vidéo, comme la lecture, la pause et le volume.
C'est une bonne idée de toujours inclure widthet heightattributs. Si la hauteur et la largeur ne sont pas définies, la page peut scintiller pendant le chargement de la vidéo.
L' <source>élément 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' <video>élément.
HTML <vidéo> lecture automatique
Pour démarrer une vidéo automatiquement, utilisez l' autoplayattribut :
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>
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 mutedaprès
autoplaypour que votre vidéo commence à jouer automatiquement (mais en mode silencieux) :
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>
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge l'
<video>élément.
| Element | |||||
|---|---|---|---|---|---|
| <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 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 |
Vidéo HTML - Types de médias
| File Format | Media Type |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
Vidéo HTML - Méthodes, propriétés et événements
Le DOM HTML définit les méthodes, les propriétés et les événements de l' <video>élément.
Cela vous permet de charger, de lire et de 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 en pause, etc.
Pour une référence complète du DOM, consultez notre référence HTML Audio/Video DOM .
Balises vidéo HTML
| Tag | Description |
|---|---|
| <video> | Defines a video or movie |
| <source> | Defines multiple media resources for media elements, such as <video> and <audio> |
| <track> | Defines text tracks in media players |