L'élément HTML <video> intègre un contenu vidéo dans un document.

L'exemple précédent illustre comment utiliser l'élément <video> simplement, à la façon d'un élément <img>. Le chemin vers le média à afficher est fourni via l'attribut src et on peut inclure d'autres attributs afin de spécifier la largeur et la hauteur, la lecture automatique et/ou en boucle, les contrôles affichés, etc.

Le contenu fourni entre les balises <video></video> est affiché comme contenu alternatif par les navigateurs qui ne prennent pas en charge l'élément.

Les navigateurs ne prennent pas en charge l'ensemble des formats vidéo et il est possible de fournir plusieurs sources grâce à des éléments <source>, le navigateur utilisera la première ressource dont il connaît le format :

<video controls>
  <source src="maVideo.mp4" type="video/mp4">
  <source src="maVideo.webm" type="video/webm">
  <p>Votre navigateur ne prend pas en charge les vidéos HTML5.
     Voici <a href="myVideo.mp4">un lien pour télécharger la vidéo</a>.</p>
</video>

Quelques notes d'utilisation :

  • Si l'attribut controls n'est pas indiqué, la vidéo n'incluera pas les contrôles par défaut du navigateurs et il est nécessaire de fournir ses propres contrôles en utilisant JavaScript et l'API HTMLMediaElement API. Voir l'article créer un lecteur vidéo multi-navigateurs pour plus de détails.
  • L'API HTMLMediaElement déclenche de nombreux évènements qui permettent d'avoir un contrôle précis sur l'audio et la vidéo.
  • La propriété object-position permet d'ajuster la position de la vidéo dans le cadre du lecteur et la propriété object-fit permet de contrôler l'ajustement de la taille de la vidéo dans le cadre.
  • Afin de fournir des sous-titres et légendes à la vidéo, on peut utiliser du code JavaScript ainsi que des éléments <track> au format WebVTT. Voir l'article Ajouter des sous-titres et légendes à une vidéo HTML5 pour plus d'informations.

Pour apprendre les bases concernant <video>, nosu vous conseillons de consulter le tutoriel sur le contenu audio et video.

Attributs

À l'instar des autres éléments HTML, cet élément inclut les attributs universels.

autoplay
Un attribut booléen qui indique que la vidéo doit automatiquement être lancée dès qu'elle peut être jouée sans être arrêtée par le chargement des données.

Note : la lecture automatique peut être source de nuisance pour les utilisateurs. Mieux vaut l'éviter lorsque c'est possible ou proposer à l'utilisateur de choisir cette option. Cette valeur peut être utile lors de la création de vidéos dont la source sera définie a posteriori.

Note : Cet attribut est un attribut booléen et indiquer autoplay="false" ne suffira pas à retirer la lecture automatique. Pour ce faire, il faut complètement retirer l'attribut.

Note :  Pour certains navigateurs (ex. Chrome 70), l'attribut autoplay ne fonctionne pas si aucun attribut muten'est présent.

buffered
Un attribut qui peut être lu afin de déterminer l'intervalle temporel mis en mémoire tampon. Cet attribut contient un objet TimeRanges.
controls
Si cet attribut est présent, le navigateur affichera des contrôles pour permettre à l'utilisateur de contrôler la lecture de la vidéo, le volume et la mise sur pause.
crossorigin
Cet attribut à valeur contrainte permet d'indiquer si le CORS doit être utilisé pour récupérer la vidéo. Les ressources avec le CORS activé peuvent être réutilisées dans un élément <canvas> sans le corrompre. Les valeurs autorisées sont :
  • anonymous : une requête cross-origine est envoyée sans information d'authentification. Autrement dit, un en-tête HTTP Origin est envoyé, sans cookie, certificat X.509 ou sans authentification HTTP simple. Si le serveur ne fournit pas d'informations d'authentification au site d'origine (c'est-à-dire en n'envoyant pas l'en-tête HTTP Access-Control-Allow-Origin), la vidéo sera corrompue et son utilisation sera restreinte.
  • use-credentials : une requête cross-origine est envoyée avec une information d'authentification. Autrement dit, un en-tête HTTP Header est envoyé, avec un cookie, une certification ou une authentification HTTP simple. Si le serveur ne fournit pas d'informations d'authentification au site d'origine (c'est-à-dire en n'envoyant pas l'en-tête HTTP Access-Control-Allow-Origin), la vidéo sera corrompue et son utilisation sera restreinte.
Lorsque cet attribut n'est pas présent, la ressource est récupérée sans requête CORS (l'en-tête HTTP Origin) n'est pas envoyé) et elle ne peut pas être utilisée dans un élément <canvas>. Si la valeur est invalide, elle sera gérée comme si le mot-clé anonymous était utilisé. Pour plus d'informations, consulter l'article sur les attributs de paramétrage du CORS.
height
La hauteur de la zone où afficher la vidéo, exprimée en pixels CSS (en valeur absolue uniquement).
intrinsicsize
Cet attribut indique au navigateur d'ignorer la taille intrinsèque de la vidéo est de la dimensionner avec la taille définie par cet attribut. La vidéo aura les dimensions indiquées et le rapport naturalWidth/naturalHeight renverra les valeurs fournies par cet attribut. Explications, exemples
loop
Un attribut booléen, qui, lorsqu'il est présent, indique que la vidéo doit être jouée en boucle.
muted
Un attribut booléen qui indique s'il faut couper le son contenu dans la vidéo. Si cet attribut est utilisé, le son sera coupé au lancement de la vidéo. Par défaut, quand l'attribut est absent, le son sera utilisé lors de la lecture de la vidéo.
playsinline
Un attribut booléen qui indique que la vidéo doit être jouée en incise, c'est-à-dire au sein de la zone de lecture de l'élément. À noter : l'absence de cet attribut n'implique pas que la vidéo sera lancée en plein écran.
preload
Cet attribut à valeur contrainte est une indication destinée au navigateur sur la meilleure façon de charger la vidéo (selon l'auteur de la page). Il peut prendre l'une des valeurs suivantes :
  • none : la vidéo ne doit pas être préchargée.
  • metadata : seules les métadonnées de la vidéo (sa durée par exemple) sont récupérées.
  • auto : le fichier entier peut être téléchargé, même si l'utilisateur ne s'en sert pas.
  • la chaîne de caractères vide ("") : synonyme de la valeur auto.

Si cet attribut n'est pas défini, la valeur par défaut sera définie par le navigateur. La spécification conseille d'utiliser la valeur metadata.

Notes d'utilisation :
  • L'attribut autoplay a la priorité sur preload. Si autoplay est défini, le navigateur doit nécessairement télécharger la vidéo pour la lancer.
  • Cet attribut est simplement une indication, la spécification ne force pas le navigateur à respecter la valeur de cet attribut.
poster
Une URL qui contient une vignette à afficher tant que la vidéo est en cours de téléchargement. Si cet attribut n'est pas utilisé, rien n'est affiché jusqu'à ce que la première image de la vidéo soit disponible, ensuite, c'est cette image qui est affichée comme vignette sur la vidéo.
src
L'URL de la vidéo à intégrer. Cet attribut est optionnel, l'élément <source> peut également être utilisé dans l'élément <video> afin d'indiquer la vidéo à intégrer.
width
La largeur de la zone où afficher la vidéo, exprimée en pixels CSS (en valeur absolue uniquement).

Évènements

L'élément <video> peut déclencher de nombreux évènements.

Notes d'utilisation

Mise en forme avec CSS

L'élément <video> est un élément remplacé et, pour cet élément, la valeur initiale de display est inline mais la hauteur et la largeur du cadre sont définies par les caractéristiques de la vidéo embarquée.

On peut changer la valeur de display en block afin de simplifier le positionnement et le dimensionnement. L'article Bases de la mise en forme d'un lecteur vidéo fournit différentes techniques de mise en forme.

Détecter l'ajout et la suppression de pistes

Il est possible de détecter l'ajout et la suppression de pistes d'un élément <video> grâce aux évènements addtrack et removetrack. Toutefois, ces évènements ne sont pas déclenchés à même l'élément <video> mais sur l'objet représentant la liste des pistes associées à l'élément <video> grâce à l'objet HTMLMediaElement qui possède un type différent selon le type de piste manipulé :

HTMLMediaElement.audioTracks
Un objet AudioTrackList qui contient l'ensemble des pistes audio associées au média. Il est possible d'ajouter un écouteur sur l'évènement addtrack sur cet objet afin d'être alerté lorsque de nouvelles pistes audio sont ajoutées à l'élément.
HTMLMediaElement.videoTracks
On peut ajouter un écouteur d'évènement addtrack à cet objet VideoTrackList afin d'être alerté lorsque des pistes vidéos sont ajoutées à l'élément.
HTMLElement.textTracks
On peut ajouter un écouteur d'évènement addtrack à cet objet TextTrackList afin d'être alerté lorsque des pistes textuelles sont ajoutées à l'élément.

Le fragment de code qui suit, par exemple, permettra d'appeler une fonction donnée lorsque des pistes audio sont ajoutées ou supprimées d'un élément <video> :

var elem = document.querySelector("video");

elem.audioTrackList.onaddtrack = function(event) {
  trackEditor.addTrack(event.track);
};

elem.audioTrackList.onremovetrack = function(event) {
  trackEditor.removeTrack(event.track);
};

On peut aussi utiliser la méthode addEventListener() pour gérer les évènements addtrack et removetrack.

Exemples

Exemples simples

<!-- Un exemple simple -->
<video src="fichiervideo.webm" autoplay poster="vignette.jpg">
  Votre navigateur ne permet pas de lire les vidéos.
  Mais vous pouvez toujours 
  <a href="fichiervideo.webm">la télécharger</a> !
</video>

<!-- Une vidéo avec des sous-titres -->
<video src="toto.webm">
  <track kind="subtitles" src="toto.en.vtt" srclang="en"
    label="Anglais">
  <track kind="subtitles" src="toto.sv.vtt" srclang="sv"
    label="Suédois">
</video>

Dans le premier exemple, la vidéo est lancée dès que possible. Avant que la vidéo ne soit lancée, la vignette utilisée sera le fichier "vignette.jpg".

Dans le deuxième exemple, l'utilisateur peut choisir parmi deux pistes de sous-titres.

Utiliser plusieurs sources

Dans cet exemple, trois sources différentes pour la vidéo sont fournies. La première source utilisée est WebM, si son format n'est pas lisible pour le navigateur, c'est le fichier MP4 qui sera utilisé et si celui-ci n'est pas lisible non plus, ce sera le fichier OGG qui sera exploité.

<video width="480" controls
  poster="https://archive.org/download/WebmVp8Vorbis/webmvp8.gif" >
  <source
    src="https://archive.org/download/WebmVp8Vorbis/webmvp8.webm"
    type="video/webm">
  <source
    src="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4"
    type="video/mp4">
  <source
    src="https://archive.org/download/WebmVp8Vorbis/webmvp8.ogv"
    type="video/ogg">
  Votre navigateur ne permet pas de lire les vidéos HTML5.
</video>

Utilisation côté serveur

Si le type MIME de la vidéo n'est pas indiqué correctement sur le serveur, la vidéo peut ne pas s'afficher, le navigateur peut afficher un boîte grise avec une croix si JavaScript est activé.

Si vous utilisez Apache pour servir des vidéos Ogg Theora, vous pouvez ajouter les extensions utilisées pour les fichiers en face du type MIME. Pour cela, il faut éditer le fichier de configuration mime.types (situé dans le dossier /etc/apache ) ou utiliser la directive de configuration AddType dans le fichier httpd.conf.

AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg

Pour les vidéos WebM, le problème peut également être réglé en modifiant le fichier mime.types situé dans /etc/apache ou en ajoutant une directive AddType au fichier httpd.conf.

AddType video/webm .webm

Accessibilité

Les vidéos doivent fournir des sous-titres et retranscription qui décrivent précisément le contenu. Les sous-titres doivent permettre au visiteur malentendant de comprendre le contenu audio lorsque la vidéo est lancée. Les retranscriptions sont utilisées par les personnes qui souhaitent relire le contenu audio à un rythme différent.

Si on utilise un service de sous-titrage automatique est utilisé, il est nécessaire de vérifier que le contenu généré correspond bien au contenu audio de la vidéo.

En plus des dialogues, les sous-titres et retranscription doivent également inclure les informations permettant d'identifier la musique et les effets sonores qui communiquent des informations importantes (l'émotion et le ton entre autres) :

14
00:03:14 --> 00:03:18
[Musique rock théâtrale]

15 
00:03:19 --> 00:03:21
[Murmure] Qu'est-ce que c'est au loin ?

16
00:03:22 --> 00:03:24
C'est… C'est un…

16 00:03:25 --> 00:03:32
[Bruit de choc]
[La vaisselle se brise]

Les sous-titres ne doivent pas masquer le sujet principal de la vidéo. Ils peuvent être positionnés grâce à l'indication align.

Résumé technique

Catégories de contenu Contenu de flux, contenu phrasé, contenu intégré. Si l'élément a un attribut controls : contenu interactif, contenu tangible.
Contenu autorisé

Si l'élément a un attribut src : zéro ou plusieurs éléments <track> suivi par du contenu transparent qui ne contient pas d'élément <audio> ou <video>

Sinon, zéro ou plusieurs éléments <source> suivi par zéro ou plusieurs éléments <track>, suivi par du contenu transparent qui ne contient pas d'élément <audio> ou <video>.

Omission de balises Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires
Parents autorisés Tout élément qui accepte du contenu intégré.
Rôles ARIA autorisés application
Interface DOM HTMLVideoElement

Spécifications

Spécification État Commentaires
HTML Living Standard
La définition de '<video>' dans cette spécification.
Standard évolutif  

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simpleChrome Support complet 3Edge Support complet OuiFirefox Support complet 3.5IE Support complet 9Opera Support complet 10.5Safari Support complet 3.1WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
autoplayChrome Support complet 3Edge Support complet OuiFirefox Support complet 3.5IE Support complet 9Opera Support complet 10.5Safari Support complet 3.1WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet 10
Notes
Support complet 10
Notes
Notes Only available for videos that have no sound or have the audio track disabled.
Samsung Internet Android Support complet Oui
bufferedChrome ? Edge Support complet OuiFirefox Support complet 4IE ? Opera Support complet OuiSafari ? WebView Android ? Chrome Android ? Edge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS ? Samsung Internet Android ?
controlsChrome Support complet 3Edge Support complet OuiFirefox Support complet 3.5IE Support complet 9Opera Support complet 10.5Safari Support complet 3.1WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
crossoriginChrome ? Edge Support complet OuiFirefox Support complet 12IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile Support complet OuiFirefox Android Support complet 14Opera Android ? Safari iOS ? Samsung Internet Android ?
heightChrome Support complet 3Edge Support complet OuiFirefox Support complet 3.5IE Support complet 9Opera Support complet 10.5Safari Support complet 3.1WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
intrinsicsize
ExpérimentaleNon-standard
Chrome Support complet 71
Désactivée
Support complet 71
Désactivée
Désactivée From version 71: this feature is behind the #enable-experimental-productivity-features preference. To change preferences in Chrome, visit chrome://flags.
Edge ? Firefox ? IE Aucun support NonOpera Support complet 58Safari Aucun support NonWebView Android Support complet 71
Désactivée
Support complet 71
Désactivée
Désactivée From version 71: this feature is behind the #enable-experimental-productivity-features preference.
Chrome Android Support complet 71
Désactivée
Support complet 71
Désactivée
Désactivée From version 71: this feature is behind the #enable-experimental-productivity-features preference. To change preferences in Chrome, visit chrome://flags.
Edge Mobile ? Firefox Android ? Opera Android Support complet 58Safari iOS Aucun support NonSamsung Internet Android ?
loopChrome Support complet 3Edge Support complet OuiFirefox Support complet 11IE Support complet 9Opera Support complet 10.5Safari Support complet 3.1WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 14Opera Android Support complet OuiSafari iOS Support complet 6Samsung Internet Android Support complet Oui
mutedChrome Support complet 30Edge Support complet OuiFirefox Support complet 11IE Support complet 10Opera Support complet OuiSafari Support complet 5WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 14Opera Android Support complet OuiSafari iOS ? Samsung Internet Android Support complet Oui
playedChrome ? Edge Support complet OuiFirefox Support complet 15IE ? Opera Support complet OuiSafari ? WebView Android ? Chrome Android ? Edge Mobile Support complet OuiFirefox Android Support complet 15Opera Android Support complet OuiSafari iOS ? Samsung Internet Android ?
posterChrome Support complet 3Edge Support complet OuiFirefox Support complet 3.6IE Support complet 9Opera Support complet 10.5Safari Support complet 3.1WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
preloadChrome Support complet 3Edge Support complet OuiFirefox Support complet 4IE Support complet 9Opera Support complet OuiSafari Support complet 3.1WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
srcChrome Support complet 3Edge Support complet OuiFirefox Support complet 3.5IE Support complet 9Opera Support complet 10.5Safari Support complet 3.1WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
widthChrome Support complet 3Edge Support complet OuiFirefox Support complet 3.5IE Support complet 9Opera Support complet 10.5Safari Support complet 3.1WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.

Voir aussi

Étiquettes et contributeurs liés au document

Dernière mise à jour par : SphinxKnight,