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

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> suivis 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

Attributes

À 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 : Pour certaines versions de Chrome, cet attribut a le nom autostart et non autoplay.

buffered
Un attribut qui peut être lu afin de déterminé 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és 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, on envoie un en-tête HTTP Origin 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, on envoie un en-tête HTTP Header avec un cookie, un certification ou on effectue 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.
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.
played
Un objet TimeRanges qui indique les intervalles de la vidéo qui ont été joués.
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 l'utilise 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 forcec pas le navigateur à respecter la valeur de cet attribut.
poster
Une URL qui contient une vignette à afficher tant que la vidéo n'est pas lancée par l'utilisateur. 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 qu'on souhaite intégrer. Cet attribut est optionnel, on peut également utiliser l'élément <source> 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.

Évènements

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

Notes d'utilisation

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

<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 par 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

Si vous servez des vidéos WebM, on peut également régler le problème en modifiant le fichier mime.types situé dans /etc/apache ou en ajoutant une directive AddType au fichier httpd.conf.

AddType video/webm .webm

Spécifications

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

Compatibilité des navigateurs

Fonctionnalité Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Support simple 3.0 (Oui) 3.5 (1.9.1) 9.0 10.5 3.1
Attribut autoplay 3.0 (Oui) 3.5 (1.9.1) 9.0 10.5 3.1
Attribut buffered ? (Oui) 4.0 (2.0) ? (Oui) ?
Attribut controls 3.0 (Oui) 3.5 (1.9.1) 9.0 10.5 3.1
Attribut crossorigin ? (Oui) 12.0 (12.0) ? ? ?
Attribut loop 3.0 (Oui) 11.0 (11.0) 9.0 10.5 3.1
Attribut muted 30.0 (Oui) 11.0 (11.0) 10.0 (Oui) 5.0
Attribut played ? (Oui) 15.0 (15.0) ? (Oui) ?
Attribut poster 3.0 (Oui) 3.6 (1.9.2) 9.0 10.5 3.1
Attribut preload 3.0 (Oui) 4.0 (2.0) 9.0 (Oui) 3.1
Attribut src 3.0 (Oui) 3.5 (1.9.1) 9.0 10.5 3.1
Fonctionnalité Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple ? (Oui) 1.0 (1.0) ? ? ?
Attribut autoplay ? (Oui) 1.0 (1.0) 8.1 ? 10.0[1]
Attribut buffered ? (Oui) 4.0 (2.0) ? ? ?
Attribut controls ? (Oui) 1.0 (1.0) ? ? ?
Attribut loop ? (Oui) 11.0 (11.0) 8.0 ? 6.0
Attribut muted ? (Oui) 11.0 (11.0) 8.0 ? ?
Attribut played ? (Oui) 15.0 (15.0) ? ? ?
Attribut poster ? (Oui) 1.0 (1.0) ? ? ?
Attribut preload ? (Oui) 4.0 (2.0) ? ? ?
Attribut src ? (Oui) 1.0 (1.0) ? ? ?
Attribut crossorigin ? (Oui) 12.0 (12.0) ? ? ?

[1] Pour iOS 10, autoplay est uniquement autorisé pour les vidéos qui n'ont pas de son ou dont la piste audio a été désactivée.

Voir aussi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight, Chbok, sami.boukortt, theotix, tregagnon, teoli, mekal, BenoitL
 Dernière mise à jour par : SphinxKnight,