<video>

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

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

• L'élément <video> peut contenir un ou plusieurs sources vidéo. Pour définir une source, on utilisera l'attribut src ou l'élément <source>. Parmi ces sources, le navigateur sélectionnera la plus pertinente.
• Pour plus d'informations sur les formats utilisables, consulter l'article sur les formats pris en charge par <audio> et <video>.

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

Compatibilité des navigateurs

[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

• Les formats pris en charge par <audio> et <video>
• <audio>
• Utiliser les éléments <audio> et <video>
• Manipuler l'élément <video> avec <canvas>
• Spécification HTML5 pour <video>
• Configuration côté serveur pour les média Ogg
• État de la prise en charge pour <video>