Revision 1039848 of <video>

<div>{{HTMLVersionHeader(5)}}</div>

<h2 id="Summary" name="Summary">Résumé</h2>

<p>L'<strong>élément HTML <code>&lt;video&gt;</code></strong> est utilisé pour intégrer des vidéo dans un document HTML ou XHTML.</p>

<p>Pour obtenir une liste des formats supportés, voir <a href="/fr/docs/Web/HTML/formats_media_support" title="/fr/docs/HTML/formats_media_support">les formats supportés par les éléments audio et video</a>.</p>

<ul class="htmlelt">
 <li><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu" title="/fr/docs/HTML/Catégorie_de_contenu">Catégories de contenu </a></dfn><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_flux" title="https://developer.mozilla.org/fr/docs/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9" title="/fr/docs/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé, </a><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_int.C3.A9gr.C3.A9" title="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_int.C3.A9gr.C3.A9">contenu intégré</a>. Si l'attribut {{htmlattrxref("controls", "audio")}} est utilisé : <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_interactif" title="/fr/docs/HTML/Cat%C3%A9gorie_de_contenu#Contenu_interactif">contenu interactif</a>, contenu palpable.</li>
 <li><dfn>Contenu autorisé </dfn>Si l'élément possède un attribut {{htmlattrxref("src", "video")}} : zéro ou plusieurs éléments {{HTMLElement("track")}}, suivis par du contenu transparent ne contenant pas d'éléments média, c'est-à-dire des éléments qui ne soient pas {{HTMLElement("audio")}} ou {{HTMLElement("video")}}<br />
  Sinon : zéro ou plusieurs éléments {{HTMLElement("source")}} suivis par un élément {{HTMLElement("track")}}, suivi par du contenu transparent ne contenant pas d'éléments média (ni {{HTMLElement("audio")}} ni {{HTMLElement("video")}}).</li>
 <li><dfn>Omission de balises </dfn> {{no_tag_omission}}</li>
 <li><dfn>Élément parents autorisés </dfn>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_int.C3.A9gr.C3.A9" title="/fr/docs/HTML/Cat%C3%A9gorie_de_contenu#Contenu_int.C3.A9gr.C3.A9">contenu intégré</a></li>
 <li><dfn>Interface DOM </dfn> {{domxref("HTMLVideoElement")}}.</li>
</ul>

<h2 id="Attributs">Attributs</h2>

<p>Comme tous les éléments HTML, cet élément possède les <a href="/fr/docs/Web/HTML/Global_attributes" title="HTML/Global_attributes">attributs globaux</a>.</p>

<dl>
 <dt>{{htmlattrdef("autoplay")}}</dt>
 <dd>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.</dd>
 <dt>{{htmlattrdef("autobuffer")}} {{Non-standard_inline}} {{obsolete_inline}}</dt>
 <dd>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.
 <div class="note"><strong>Note relative à l'implémentation :</strong> Bien que faisant partie de la plupart des ébauches de la spécification HTML5, l'attribut <code>autobuffer</code> 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 <code>preload</code> remplaçant l'attribut <code>autobuffer</code> et utilisant une syntaxe différente. {{bug(548523)}}</div>
 </dd>
 <dt>{{htmlattrdef("buffered")}}</dt>
 <dd>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 {{domxref("TimeRanges")}}.</dd>
 <dt>{{htmlattrdef("controls")}}</dt>
 <dd>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.</dd>
 <dt>{{htmlattrdef("crossorigin")}}</dt>
 <dd>Cet attribut dénombrable indique si le média peut être utilisé depuis une origine distante (CORS) ou pas. Les <a href="/fr/docs/Web/HTML/Image_avec_ressources_origines_multiples_CORS_activees" title="CORS_Enabled_Image">ressources avec CORS activé</a> peuvent être ré-utilisées dans un élément {{HTMLElement("canvas")}} sans le corrompre. Les valeurs autorisées sont :</dd>
 <dd>&nbsp;
 <dl>
  <dt>anonymous</dt>
  <dd>Une requête d'origines multiples (<em>cross-origin</em>) est effectuée (c'est à dire avec l'en-tête HTTP <code>Origin</code>). 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 <code>Access-Control-Allow-Origin:</code>), l'image sera corrompue et son utilisation restreinte.</dd>
  <dt>use-credentials</dt>
  <dd>Une requête d'origines multiples (avec l'en-tête HTTP <code>Origin:</code>) 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<code> Access-Control-Allow-Credentials:</code>, l'image sera corrompue et son utilisation restreinte.</dd>
 </dl>
 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 <code>Origin:</code>), afin d'éviter un usage non-corrompu dans des éléments {{HTMLElement('canvas')}}. Si cet attribut est invalide, il est pris en compte comme si le mot-clé <strong>anonymous</strong> avait été utilisé. Voir la page <a href="/fr/docs/Web/HTML/Reglages_des_attributs_CORS" title="Attributs_de_réglage_du_CORS">attributs de réglage du CORS</a> pour plus d'informations.</dd>
 <dt>{{htmlattrdef("height")}}</dt>
 <dd>La hauteur utilisée pour afficher la zone dédiée à l'élément video, exprimée en pixels CSS.</dd>
 <dt>{{htmlattrdef("loop")}}</dt>
 <dd>Un attribut booléen. S'il est définit et vaut <code>true</code> la lecture en boucle de la vidéo sera activée.</dd>
 <dt>{{htmlattrdef("muted")}}</dt>
 <dd>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 <code>false</code>, indiquant que le son de la vidéo doit être activé à la lecture.</dd>
 <dt>{{htmlattrdef("played")}}</dt>
 <dd>Un objet {{domxref("TimeRanges")}} indiquant tous les fragments de la vidéo ayant été lus.</dd>
 <dt>{{ htmlattrdef("preload") }}</dt>
 <dd>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 :</dd>
 <dd><code>none</code> : 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.</dd>
 <dd><code>metadata</code> : 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).</dd>
 <dd><code>auto</code> : 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.</dd>
 <dd><code>"" </code>(chaîne de caractères vide) : synonyme de <code>auto</code></dd>
 <dd>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 <code>metadata</code> comme valeur par défaut.</dd>
</dl>

<dl>
 <dd>
 <div class="note"><strong>Note d'utilisation :</strong> L'attribut <code>autoplay</code> annulera cet attribut. Si le navigateur a besoin de jouer cet élément, il le téléchargera automatiquement. Renseigner les deux attributs <code>autoplay</code> et <code>preload</code> 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.</div>
 </dd>
 <dt>{{htmlattrdef("poster")}}</dt>
 <dd>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.</dd>
 <dt>{{htmlattrdef("src")}}</dt>
 <dd>L'URL de la vidéo à intégrer. Cet attribut est optionnel et il est possible d'utiliser l'élément {{HTMLElement("source")}} au sein de l'élément video pour définir la vidéo à intégrer.</dd>
 <dt>{{htmlattrdef("width")}}</dt>
 <dd>La largeur utilisée pour afficher la zone dédiée à la vidéo, exprimée en pixels CSS.</dd>
</dl>

<p>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.</p>

<div class="note"><strong>Note :</strong> La définition de la valeur du décalage de temps n'a pas encore été finalisée dans la spécification HTML5 et est donc sujette aux changements.</div>

<h2 id="Examples" name="Examples">Exemples</h2>

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

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

<p>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.</p>

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

<h2 id="Server_support" name="Server_support">Support côté serveur</h2>

<p>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é).</p>

<p>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.</p>

<pre>
AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg
</pre>

<p>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.</p>

<pre>
AddType video/webm .webm
</pre>

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

<p>embedded-content-0.html#video</p>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table" style="height:75px; width:526px">
 <thead>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">Statut</th>
   <th scope="col">Commentaires</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'the-video-element.html#the-video-element', '&lt;video&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#video', '&lt;video&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>&nbsp;</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Fonctionnalité</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Support simple</td>
   <td>3.0</td>
   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
   <td>9.0</td>
   <td>10.5</td>
   <td>3.1</td>
  </tr>
  <tr>
   <td>Attribut <code>autoplay</code></td>
   <td>3.0</td>
   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
   <td>9.0</td>
   <td>10.5</td>
   <td>3.1</td>
  </tr>
  <tr>
   <td>Attribut <code>buffered</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop("2.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>Yes</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>Attribut<code> controls</code></td>
   <td>3.0</td>
   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
   <td>9.0</td>
   <td>10.5</td>
   <td>3.1</td>
  </tr>
  <tr>
   <td>Attribut <code>loop</code></td>
   <td>3.0</td>
   <td>{{CompatGeckoDesktop("11.0")}}</td>
   <td>9.0</td>
   <td>10.5</td>
   <td>3.1</td>
  </tr>
  <tr>
   <td>Attribut <code>muted</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop("11.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>Yes</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>Propriété <code>played</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop("15.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>Yes</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>Attribut <code>poster</code></td>
   <td>3.0</td>
   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
   <td>9.0</td>
   <td>10.5</td>
   <td>3.1</td>
  </tr>
  <tr>
   <td>Attribut <code>preload</code></td>
   <td>3.0</td>
   <td>{{CompatGeckoDesktop("2.0")}}</td>
   <td>9.0</td>
   <td>Yes</td>
   <td>3.1</td>
  </tr>
  <tr>
   <td>Attribut <code>src</code></td>
   <td>3.0</td>
   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
   <td>9.0</td>
   <td>10.5</td>
   <td>3.1</td>
  </tr>
  <tr>
   <td>Attribut <code>crossorigin</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop("12.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Fonctionnalité</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Support simple</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("1.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>Attribut <code>autoplay</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("1.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>iOS6 seulement</td>
  </tr>
  <tr>
   <td>Attribut <code>buffered</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("2.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>Attribut <code>controls</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("1.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>Attribut <code>loop</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("11.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>Attribut <code>muted</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("11.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>Propriété <code>played</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("15.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>Attribut <code>poster</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("1.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>Attribut <code>preload</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("2.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>Attribut <code>src</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("1.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>attribut <code>crossorigin</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("12.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="See_also" name="See_also">Voir également</h2>

<ul>
 <li><a href="/fr/docs/HTML/formats_media_support" title="Media formats supported by the audio and video elements">Formats de media supportés par les éléments HTML5 audio et video</a></li>
 <li>{{htmlelement("audio")}}</li>
 <li><a href="/fr/docs/Utilisation_d'audio_et_video_dans_Firefox" title="Using audio and video in Firefox">Utiliser les éléments HTML5 audio et video</a></li>
 <li><a href="/fr/docs/HTML/Manipulating_video_using_canvas" title="Manipulating video using canvas">Manipuler l'élément video en utilisant l'élément canvas</a></li>
 <li><a href="/fr/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" title="NsIDOMHTMLMediaElement"><code>nsIDOMHTMLMediaElement</code></a></li>
 <li><a class="external" href="https://tinyvid.tv/" title="https://tinyvid.tv/">TinyVid</a> : exemples d'utilisation de fichier ogg en HTML5.</li>
 <li><a class="external" href="https://www.whatwg.org/specs/web-apps/current-work/#video" title="https://www.whatwg.org/specs/web-apps/current-work/#video">L'élément<code> video</code> </a>(selon la spécification HTML5)</li>
 <li><a href="/fr/docs/Configuring_servers_for_Ogg_media" title="Configuring servers for Ogg media">Configurer des serveurs pour des media Ogg</a></li>
</ul>

<p>{{HTMLRef}}</p>