<video>

Résumé

L'élément HTML <video> est utilisé pour intégrer des vidéo dans un document HTML ou XHTML.

Pour obtenir une liste des formats supportés, voir les formats supportés par les éléments audio et video.

• Catégories de contenu Contenu de flux, contenu phrasé, contenu intégré. Si l'attribut controls est utilisé : contenu interactif, contenu palpable.
• Contenu autorisé Si l'élément possède un attribut src : zéro ou plusieurs éléments <track>, suivis par du contenu transparent ne contenant pas d'éléments média, c'est-à-dire des éléments qui ne soient pas <audio> ou <video>
  Sinon : zéro ou plusieurs éléments <source> suivis par un élément <track>, suivi par du contenu transparent ne contenant pas d'éléments média (ni <audio> ni <video>).
• Omission de balises Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires
• Élément parents autorisés Tout élément acceptant du contenu intégré
• Interface DOM HTMLVideoElement.

Attributs

Comme tous les éléments HTML, cet élément possède les attributs globaux.

autoplay

Un attribut booléen. S'il est renseigné, la vidéo sera automatiquement lancée dès que suffisamment de données auront été enregistrées pour que la lecture ne soit pas interrompue.

autobuffer

Un attribut booléen. S'il est renseigné, la vidéo sera automatiquement chargée en mémoire tampon même si elle ne doit pas être lancée automatiquement. Cet attribut devrait être utilisé dans les cas de figures où il est probable que la vidéo sera jouée. La vidéo est mise en mémoire cache jusqu'à ce que le cache média soit plein.

Note relative à l'implémentation : Bien que faisant partie de la plupart des ébauches de la spécification HTML5, l'attribut autobuffer a été abandonné dans les versions ultérieures. Il a été retiré de Gecko 2.0 et des autres navigateurs (pour certains, il n'a jamais été implémenté). La spécification définit un nouvel attribut preload remplaçant l'attribut autobuffer et utilisant une syntaxe différente. bug 548523

buffered

Un attribut qui peut être lu pour déterminer les fragments du media ayant été mis en mémoire cache. Cet attribut contient un objet TimeRanges.

controls

Si cet attribut est présent, Gecko permettra à l'utilisateur d'utiliser différents contrôles sur la lecture de la vidéo comme la gestion du volume, naviguer à un endroit précis de la vidéo, la mise en pause ou la reprise de la lecture.

crossorigin

Cet attribut dénombrable indique si le média peut être utilisé depuis une origine distante (CORS) ou pas. Les ressources avec CORS activé peuvent être ré-utilisées dans un élément <canvas> sans le corrompre. Les valeurs autorisées sont :

 

anonymous

Une requête d'origines multiples (cross-origin) est effectuée (c'est à dire avec l'en-tête HTTP Origin). Toutefois aucune information d'authentification n'est envoyée (pas de cookie, pas de certificat X.509, pas d'authentification HTTP simple). Si le serveur ne fournit pas d'informations d'authentification au site d'origine (en ne réglant pas l'en-tête HTTP avec la valeur Access-Control-Allow-Origin:), l'image sera corrompue et son utilisation restreinte.

use-credentials

Une requête d'origines multiples (avec l'en-tête HTTP Origin:) est effectué et des informations d'authentification sont envoyées (un cookie, un certificat et une authentification HTTP simple sont effectuées). Si le serveur ne fournit pas d'informations d'authentification au site d'origine via l'en-tête HTTP Access-Control-Allow-Credentials:, l'image sera corrompue et son utilisation restreinte.

Quand cet attribut n'est pas présent, la requête de la ressource est effectuée sans requête CORS (sans envoyer d'en-tête HTTP Origin:), afin d'éviter un usage non-corrompu dans des éléments <canvas>. Si cet attribut est invalide, il est pris en compte comme si le mot-clé anonymous avait été utilisé. Voir la page attributs de réglage du CORS pour plus d'informations.

height

La hauteur utilisée pour afficher la zone dédiée à l'élément video, exprimée en pixels CSS.

loop

Un attribut booléen. S'il est définit et vaut true la lecture en boucle de la vidéo sera activée.

muted

Un attribut booléen indiquant si le son de la vidéo doit être coupé à la lecture ou non. Sa valeur par défaut est false, indiquant que le son de la vidéo doit être activé à la lecture.

played

Un objet TimeRanges indiquant tous les fragments de la vidéo ayant été lus.

preload

Cet attribut énumératif permet de fournir au navigateur une indication lui permettant de savoir ce que l'auteur de la page pense de l'utilisation optimale de cet élément. Il peut prendre les valeurs suivantes :

none : cela indique que soit l'auteur pense que l'utilisateur n'aura pas besoin de cet élément soit que le serveur souhaite minimiser son traffic. En d'autres termes, cela indique que l'élément video ne devrait pas être mis en cache.

metadata : cela indique que, même si l'utilisateur n'a pas besoin de l'élément video, il est préférable de préparer les méta-données (comme la durée).

auto : cela indique que l'utilisateur a besoin de cet élément en priorité. Cela signifie que, si nécessaire, l'élément audio en entier sera téléchargé même si l'utilisateur pourra ne pas le lire.

"" (chaîne de caractères vide) : synonyme de auto

Si cet attribut n'est pas renseigné, la valeur par défaut sera celle du navigateur (chaque navigateur pouvant définir sa propre valeur). Les spécifications conseillent la valeur metadata comme valeur par défaut.

Note d'utilisation : L'attribut autoplay annulera cet attribut. Si le navigateur a besoin de jouer cet élément, il le téléchargera automatiquement. Renseigner les deux attributs autoplay et preload est autorisé par la spécification. Bien que le navigateur n'a pas, selon la spécification, à suivre la valeur de cet attribut. Il n'est qu'une simple indication.

poster

Une URL indiquant une image à afficher dans le cadre de l'élément jusqu'à que l'utilisateur lance la lecture ou aille à un endroit précis de la vidéo. Si l'attribut n'est pas renseigné alors rien n'est affiché jusqu'à ce que la première frame soit disponible et soit donc affichée.

src

L'URL de la vidéo à intégrer. Cet attribut est optionnel et il est possible d'utiliser l'élément <source> au sein de l'élément video pour définir la vidéo à intégrer.

width

La largeur utilisée pour afficher la zone dédiée à la vidéo, exprimée en pixels CSS.

Les décalages de temps sont actuellement définis comme le nombre flottant représentant le nombre de seconde dont il faut décaler la vidéo.

Exemples

<!-- Vidéo simple -->
<video src="videofile.ogg" autoplay poster="posterimage.jpg">
  Nous sommes désolés, votre navigateur ne semble pas supporter 
  les vidéos intégrées. Vous pouvez toujours <a href="videofile.ogg">la télécharger</a>
  et la visionner avec votre lecteur vidéo préféré !
</video>

<!-- Video avec sous-titres -->
<video src="foo.ogg">
  <track kind="subtitles" src="foo.en.vtt" srclang="en" label="English">
  <track kind="subtitles" src="foo.sv.vtt" srclang="sv" label="Svenska">
</video>

Le premier exemple lance une vidéo, dès que cela est possible (suffisament de données ont été téléchargées pour permettre une lecture ininterrompue). Jusqu'à ce que la vidéo soit lancée, l'image "posterimage.jpg" est affichée.

Le second exemple permet à l'utilisateur de choisir entre différents sous-titres.

Support côté serveur

Si le type MIME de la vidéo n'est pas paramétré correctement sur le serveur, la vidéo pourrait ne pas être affichée ou un rectangle gris avec une croix sera affiché (si JavaScript est activé).

Si vous servez vos vidéos en Ogg Theora, vous pouvez résoudre ce problème sur les serveurs web Apache en ajoutant l'extension utilisée par vos fichiers vidéo (".ogm", ".ogv", or ".ogg" étant les plus communes) au type MIME "video/ogg" grâce au fichier "mime.types" contenu à l'emplacement "/etc/apache" ou grâce à une configuration directive "AddType" dans le fichier httpd.conf.

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

Si vous servez des vidéos en WebM, vous pouvez résoudre ce problème sur les serveurs web Apache en ajoutant l'extension utilisée par vos fichiers vidéo (".webm" étant la plus commune) au type MIME "video/webm" grâce au fichier "mime.types" contenu à l'emplacement "/etc/apache" ou grâce à une configuration directive "AddType" dans le fichier httpd.conf.

AddType video/webm .webm

L'hôte web peut fournir une interface simple pour configurer les changements éventuels de type MIME.

embedded-content-0.html#video

Spécifications

Compatibilité des navigateurs

Voir également

• Formats de media supportés par les éléments HTML5 audio et video
• <audio>
• Utiliser les éléments HTML5 audio et video
• Manipuler l'élément video en utilisant l'élément canvas
• nsIDOMHTMLMediaElement
• TinyVid : exemples d'utilisation de fichier ogg en HTML5.
• L'élément video (selon la spécification HTML5)
• Configurer des serveurs pour des media Ogg