path: root/files/fr/web/html/element/video/index.html

---
title: <video>
slug: Web/HTML/Element/video
tags:
  - Element
  - HTML
  - Media
  - Multimedia
  - Reference
  - Video
  - Web
translation_of: Web/HTML/Element/video
---
<div>{{HTMLRef}}</div>

<p>L'élément HTML <strong><code>&lt;video&gt;</code></strong> intègre un contenu vidéo dans un document.</p>

<div>{{EmbedInteractiveExample("pages/tabbed/video.html", "tabbed-standard")}}</div>

<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>

<p>L'exemple précédent illustre comment utiliser l'élément <code>&lt;video&gt;</code> simplement, à la façon d'un élément {{htmlelement("img")}}. Le chemin vers le média à afficher est fourni via l'attribut <code>src</code> 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.</p>

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

<p>Les navigateurs ne prennent pas en charge <a href="/fr/docs/Web/HTML/Formats_pour_audio_video">l'ensemble des formats vidéo</a> et il est possible de fournir plusieurs sources grâce à des éléments {{htmlelement("source")}}, le navigateur utilisera la première ressource dont il connaît le format :</p>

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

<p>Quelques notes d'utilisation :</p>

<ul>
 <li>Si l'attribut <code>controls</code> 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 {{domxref("HTMLMediaElement")}} API. Voir l'article <a href="/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player">créer un lecteur vidéo multi-navigateurs</a> pour plus de détails.</li>
 <li>L'API <code>HTMLMediaElement</code> déclenche de nombreux <a href="/fr/docs/Web/Guide/DOM/Events/evenement_medias">évènements</a> qui permettent d'avoir un contrôle précis sur l'audio et la vidéo.</li>
 <li>La propriété {{cssxref("object-position")}} permet d'ajuster la position de la vidéo dans le cadre du lecteur et la propriété {{cssxref("object-fit")}} permet de contrôler l'ajustement de la taille de la vidéo dans le cadre.</li>
 <li>Afin de fournir des sous-titres et légendes à la vidéo, on peut utiliser du code JavaScript ainsi que des éléments {{htmlelement("track")}} au format <a href="/fr/docs/Web/API/WebVTT_API">WebVTT</a>. Voir l'article <a href="/fr/docs/Web/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Ajouter des sous-titres et légendes à une vidéo HTML5</a> pour plus d'informations.</li>
</ul>

<p>Pour apprendre les bases concernant <code>&lt;video&gt;</code>, nosu vous conseillons de consulter <a href="/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video">le tutoriel sur le contenu audio et video</a>.</p>

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

<p>À l'instar des autres éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>

<dl>
 <dt>{{htmlattrdef("autoplay")}}</dt>
 <dd>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.</dd>
 <dd>
 <p class="note"><strong>Note :</strong> 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 <em>a posteriori</em>.</p>

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

 <p class="note"><strong>Note :</strong>  Pour certains navigateurs (ex. Chrome 70), l'attribut <code>autoplay</code> ne fonctionne pas si aucun attribut <code>mute</code>n'est présent.</p>
 </dd>
</dl>

<dl>
 <dt>{{htmlattrdef("buffered")}}</dt>
 <dd>Un attribut qui peut être lu afin de déterminer l'intervalle temporel mis en mémoire tampon. Cet attribut contient un objet {{domxref("TimeRanges")}}.</dd>
 <dt>{{htmlattrdef("controls")}}</dt>
 <dd>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.</dd>
 <dt>{{htmlattrdef("controlslist")}} {{experimental_inline}}</dt>
 <dd>L'attribut <code>controlslist</code>, lorsqu'il est indiqué, aide le navigateur à choisir les contrôles à afficher pour la manipulation du média lorsque l'attribut <code>controls</code> est utilisé.</dd>
 <dd>Les valeurs autorisées pour cet attribut sont <code>nodownload</code>, <code>nofullscreen</code> et <code>noremoteplayback</code>.<br>
 On utilisera l'attribut <code>disablePictureInPicture</code> afin de désactiver ce mode et les contrôles associés.</dd>
 <dt>{{htmlattrdef("crossorigin")}}</dt>
 <dd>Cet attribut à valeur contrainte permet d'indiquer si le CORS doit être utilisé pour récupérer la vidéo. <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Images_avec_le_contr%C3%B4le_d_acc%C3%A8s_HTTP">Les ressources avec le CORS activé</a> peuvent être réutilisées dans un élément {{HTMLElement("canvas")}} sans le <em>corrompre</em>. Les valeurs autorisées sont :
 <ul>
  <li><code>anonymous</code> : une requête <em>cross-origine</em> est envoyée sans information d'authentification. Autrement dit, un en-tête HTTP {{HTTPHeader("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 {{HTTPHeader("Access-Control-Allow-Origin")}}), la vidéo sera corrompue et son utilisation sera restreinte.</li>
  <li><code>use-credentials</code> : une requête <em>cross-origine</em> est envoyée avec une information d'authentification. Autrement dit, un en-tête HTTP <code>Header</code> 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 {{HTTPHeader("Access-Control-Allow-Origin")}}), la vidéo sera corrompue et son utilisation sera restreinte.</li>
 </ul>
 Lorsque cet attribut n'est pas présent, la ressource est récupérée sans requête CORS (l'en-tête HTTP {{HTTPHeader("Origin")}}) n'est pas envoyé) et elle ne peut pas être utilisée dans un élément {{HTMLElement('canvas')}}. Si la valeur est invalide, elle sera gérée comme si le mot-clé <code>anonymous</code> était utilisé. Pour plus d'informations, consulter l'article sur <a href="/fr/docs/Web/HTML/Reglages_des_attributs_CORS">les attributs de paramétrage du CORS</a>.</dd>
 <dt>{{htmlattrdef("height")}}</dt>
 <dd>La hauteur de la zone où afficher la vidéo, exprimée en pixels CSS (en valeur absolue uniquement).</dd>
 <dt>{{htmlattrdef("intrinsicsize")}} {{experimental_inline}}</dt>
 <dd>Cet attribut indique au navigateur d'ignorer la taille intrinsèque de la vidéo et de la dimensionner avec la taille définie par cet attribut. La vidéo aura les dimensions indiquées et le rapport <code>naturalWidth</code>/<code>naturalHeight</code> renverra les valeurs fournies par cet attribut. <a href="https://github.com/ojanvafai/intrinsicsize-attribute">Explications</a>, <a href="https://googlechrome.github.io/samples/intrinsic-size/index.html">exemples</a></dd>
 <dt>{{htmlattrdef("loop")}}</dt>
 <dd>Un attribut booléen, qui, lorsqu'il est présent, indique que la vidéo doit être jouée en boucle.</dd>
 <dt>{{htmlattrdef("muted")}}</dt>
 <dd>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.</dd>
 <dt><code><a href="https://wicg.github.io/picture-in-picture/#disable-pip">disablePictureInPicture</a></code> {{experimental_inline}}</dt>
 <dd>Empêche le navigateur de suggérer un menu contextuel pour la superposition d'une image/vidéo ("<em>Picture-in-picture</em>") ou de demander l'activation automatique pour la superposition du média.</dd>
 <dt>{{htmlattrdef("playsinline")}}</dt>
 <dd>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.</dd>
 <dt>{{htmlattrdef("preload")}}</dt>
 <dd>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 :
 <ul>
  <li><code>none</code> : la vidéo ne doit pas être préchargée.</li>
  <li><code>metadata</code> : seules les métadonnées de la vidéo (sa durée par exemple) sont récupérées.</li>
  <li><code>auto</code> : le fichier entier peut être téléchargé, même si l'utilisateur ne s'en sert pas.</li>
  <li>la chaîne de caractères vide (<code>""</code>) : synonyme de la valeur <code>auto</code>.</li>
 </ul>

 <p>La valeur par défaut peut être différente selon le navigateur. La spécification conseille d'utiliser la valeur <code>metadata</code>.</p>

 <div class="note"><strong>Notes d'utilisation :</strong>

 <ul>
  <li>L'attribut <code>autoplay</code> a la priorité sur <code>preload</code>. Si <code>autoplay</code> est défini, le navigateur doit nécessairement télécharger la vidéo pour la lancer.</li>
  <li>Cet attribut est simplement une indication, la spécification ne force pas le navigateur à respecter la valeur de cet attribut.</li>
 </ul>
 </div>
 </dd>
 <dt>{{htmlattrdef("poster")}}</dt>
 <dd>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.</dd>
 <dt>{{htmlattrdef("src")}}</dt>
 <dd>L'URL de la vidéo à intégrer. Cet attribut est optionnel, l'élément {{HTMLElement("source")}} peut également être utilisé dans l'élément <code>&lt;video&gt;</code> afin d'indiquer la vidéo à intégrer.</dd>
 <dt>{{htmlattrdef("width")}}</dt>
 <dd>La largeur de la zone où afficher la vidéo, exprimée en pixels CSS (en valeur absolue uniquement).</dd>
</dl>

<h2 id="Évènements">Évènements</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Nom</th>
   <th scope="col">Condition de déclenchement</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{domxref("ScriptProcessorNode.audioprocess_event","audioprocess")}}{{Deprecated_Inline}}</td>
   <td>La mémoire tampon en entrée d'un {{DOMxRef("ScriptProcessorNode")}} peut désormais être traité.</td>
  </tr>
  <tr>
   <td>{{domxref("HTMLMediaElement.canplay_event", 'canplay')}}</td>
   <td>Le navigateur peut lire le média mais estime que trop peu de données ont été chargées pour lire le média jusqu'à sa fin (il faudra vraisemblablement un arrêt pour un chargement en mémoire tampon).</td>
  </tr>
  <tr>
   <td>{{domxref("HTMLMediaElement.canplaythrough_event", 'canplaythrough')}}</td>
   <td>Le navigateur estime qu'il peut lire le média jusqu'à sa fin, sans avoir à interrompre la lecture par du chargement en mémoire tampon.</td>
  </tr>
  <tr>
   <td>{{domxref("OfflineAudioContext.complete_event", "complete")}}</td>
   <td>Le rendu d'un {{DOMxRef("OfflineAudioContext")}} est terminé.</td>
  </tr>
  <tr>
   <td>{{domxref("HTMLMediaElement.durationchange_event", 'durationchange')}}</td>
   <td>L'attribut <code>duration</code> a été mis à jour.</td>
  </tr>
  <tr>
   <td>{{domxref("HTMLMediaElement.emptied_event", 'emptied')}}</td>
   <td>Le média est devenu vide. Cela peut par exemple se produire lorsque le média a déjà été (partiellement ou complètement) chargé et que la méthode <a href="/fr/docs/Web/API/HTMLMediaElement/load" rel="internal"><code>load()</code></a> est invoquée pour le recharger.</td>
  </tr>
  <tr>
   <td>{{domxref("HTMLMediaElement.ended_event", 'ended')}}</td>
   <td>La lecture a été interrompue car la fin du média est atteinte.</td>
  </tr>
  <tr>
   <td>{{domxref("HTMLMediaElement.loadeddata_event", 'loadeddata')}}</td>
   <td>La première <em>frame</em> du média a été chargée.</td>
  </tr>
  <tr>
   <td>{{domxref("HTMLMediaElement.loadedmetadata_event", 'loadedmetadata')}}</td>
   <td>Les métadonnées ont été chargées.</td>
  </tr>
  <tr>
   <td>{{domxref("HTMLMediaElement.pause_event", 'pause')}}</td>
   <td>La lecture a été mise en pause.</td>
  </tr>
  <tr>
   <td>{{domxref("HTMLMediaElement.play_event", 'play')}}</td>
   <td>La lecture a démarré.</td>
  </tr>
  <tr>
   <td>{{domxref("HTMLMediaElement.playing_event", 'playing ')}}</td>
   <td>La lecture est prête à être lancée après avoir été mise en pause ou interrompue pour un chargement en mémoire de données.</td>
  </tr>
  <tr>
   <td>{{domxref("HTMLMediaElement.progress_event", 'progress')}}</td>
   <td>Évènement déclenché périodiquement lorsque le navigateur charge une ressource.</td>
  </tr>
  <tr>
   <td>{{domxref("HTMLMediaElement.ratechange_event", 'ratechange')}}</td>
   <td>La vitesse de lecture a changé.</td>
  </tr>
  <tr>
   <td>{{domxref("HTMLMediaElement.seeked_event", 'seeked')}}</td>
   <td>Une opération de déplacement du curseur de lecture (<em>seek</em>) est terminée.</td>
  </tr>
  <tr>
   <td>{{domxref("HTMLMediaElement.seeking_event", 'seeking')}}</td>
   <td>L'agent utilisateur tente de récupérer les données associées au média mais les données ne parviennent pas.</td>
  </tr>
  <tr>
   <td>{{domxref("HTMLMediaElement.stalled_event", 'stalled')}}</td>
   <td>L'agent utilisateur tente de récupérer les données associées au média mais les données ne parviennent pas.</td>
  </tr>
  <tr>
   <td>{{domxref("HTMLMediaElement.suspend_event", 'suspend')}}</td>
   <td>Le chargement des données du média ont été suspendues.</td>
  </tr>
  <tr>
   <td>{{domxref("HTMLMediaElement.timeupdate_event", 'timeupdate')}}</td>
   <td>Le temps décrit par l'attribut <code>currentTime</code> a été mis à jour.</td>
  </tr>
  <tr>
   <td>{{domxref("HTMLMediaElement.volumechange_event", 'volumechange')}}</td>
   <td>Le volume a été modifié.</td>
  </tr>
  <tr>
   <td>{{domxref("HTMLMediaElement.waiting_event", 'waiting')}}</td>
   <td>La lecture a été interrompue en raison d'un manque temporaire de données.</td>
  </tr>
 </tbody>
</table>

<h2 id="Notes_dutilisation">Notes d'utilisation</h2>

<h3 id="Mise_en_forme_avec_CSS">Mise en forme avec CSS</h3>

<p>L'élément <code>&lt;video&gt;</code> est un élément remplacé et, pour cet élément, la valeur initiale de {{cssxref("display")}} est <code>inline</code> mais la hauteur et la largeur du cadre sont définies par les caractéristiques de la vidéo embarquée.</p>

<p>On peut changer la valeur de <code>display</code> en <code>block</code> afin de simplifier le positionnement et le dimensionnement. L'article <a href="/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Video_player_styling_basics">Bases de la mise en forme d'un lecteur vidéo</a> fournit différentes techniques de mise en forme.</p>

<h3 id="Détecter_lajout_et_la_suppression_de_pistes">Détecter l'ajout et la suppression de pistes</h3>

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

<dl>
 <dt>{{domxref("HTMLMediaElement.audioTracks")}}</dt>
 <dd>Un objet {{domxref("AudioTrackList")}} qui contient l'ensemble des pistes audio associées au média. Il est possible d'ajouter un écouteur sur l'évènement <code>addtrack</code> sur cet objet afin d'être alerté lorsque de nouvelles pistes audio sont ajoutées à l'élément.</dd>
 <dt>{{domxref("HTMLMediaElement.videoTracks")}}</dt>
 <dd>On peut ajouter un écouteur d'évènement <code>addtrack</code> à cet objet {{domxref("VideoTrackList")}} afin d'être alerté lorsque des pistes vidéos sont ajoutées à l'élément.</dd>
 <dt>{{domxref("HTMLMediaElement.textTracks")}}</dt>
 <dd>On peut ajouter un écouteur d'évènement <code>addtrack</code> à cet objet {{domxref("TextTrackList")}} afin d'être alerté lorsque des pistes textuelles sont ajoutées à l'élément.</dd>
</dl>

<p>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 <code>&lt;video&gt;</code> :</p>

<pre class="brush: js">var elem = document.querySelector("video");

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

elem.audioTrackList.onremovetrack = function(event) {
  trackEditor.removeTrack(event.track);
};
</pre>

<p>On peut aussi utiliser la méthode {{domxref("EventTarget.addEventListener", "addEventListener()")}} pour gérer les évènements {{event("addtrack")}} et {{event("removetrack")}}.</p>

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

<h3 id="Exemples_simples">Exemples simples</h3>

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

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

<p>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 <code>"vignette.jpg"</code>.</p>

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

<h3 id="Utiliser_plusieurs_sources">Utiliser plusieurs sources</h3>

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

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

<h2 id="Utilisation_côté_serveur">Utilisation côté serveur</h2>

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

<p>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 <code>mime.types</code> (situé dans le dossier <code>/etc/apache</code> ) ou utiliser la directive de configuration <code>AddType</code> dans le fichier <code>httpd.conf</code>.</p>

<pre class="eval">AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg
</pre>

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

<pre class="eval">AddType video/webm .webm
</pre>

<h2 id="Accessibilité">Accessibilité</h2>

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

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

<p>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) :</p>

<pre class="eval">14
00:03:14 --&gt; 00:03:18
[Musique rock théâtrale]

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

16
00:03:22 --&gt; 00:03:24
C'est… C'est un…

16 00:03:25 --&gt; 00:03:32
[Bruit de choc]
[La vaisselle se brise]
</pre>

<p>Les sous-titres ne doivent pas masquer le sujet principal de la vidéo. Ils peuvent être positionnés grâce à <a href="/fr/docs/Web/API/WebVTT_API#Cue_settings">l'indication <code>align</code></a>.</p>

<ul>
 <li><a href="/fr/docs/Plugins/Flash_to_HTML5/Video/Subtitles_captions">Sous-titres et légendes - <em>Plugins</em></a></li>
 <li><a href="/fr/docs/Web/API/WebVTT_API">API Web Video Text Tracks Format (WebVTT)</a></li>
 <li><a href="https://webaim.org/techniques/captions/">WebAIM : <em>Captions, Transcripts, and Audio Descriptions</em> (en anglais)</a></li>
 <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.2_—_Providing_text_alternatives_for_time-based_media">Comprendre les règles WCAG 1.2</a></li>
 <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-av-only-alt.html"><em>Understanding Success Criterion 1.2.1 - W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
 <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-captions.html"><em>Understanding Success Criterion 1.2.2 - W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
</ul>

<h2 id="Résumé_technique">Résumé technique</h2>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_intégré">contenu intégré</a>. Si l'élément a un attribut {{htmlattrxref("controls", "video")}} : <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_interactif">contenu interactif</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
  </tr>
  <tr>
   <th scope="row">Contenu autorisé</th>
   <td>
    <p>Si l'élément a un attribut {{htmlattrxref("src", "video")}} : zéro ou plusieurs éléments {{HTMLElement("track")}} suivi par du contenu transparent qui ne contient pas d'élément {{HTMLElement("audio")}} ou {{HTMLElement("video")}}</p>

    <p>Sinon, zéro ou plusieurs éléments {{HTMLElement("source")}} suivi par zéro ou plusieurs éléments {{HTMLElement("track")}}, suivi par du contenu transparent qui ne contient pas d'élément {{HTMLElement("audio")}} ou {{HTMLElement("video")}}.</p>
   </td>
  </tr>
  <tr>
   <th scope="row">Omission de balises</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">Parents autorisés</th>
   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_intégré">contenu intégré</a>.</td>
  </tr>
  <tr>
   <th scope="row">Rôles ARIA autorisés</th>
   <td>{{ARIARole("application")}}</td>
  </tr>
  <tr>
   <th scope="row">Interface DOM</th>
   <td>{{domxref("HTMLVideoElement")}}</td>
  </tr>
 </tbody>
</table>

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

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">Retours</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-video-element', '&lt;video&gt;')}}</td>
   <td><a href="https://github.com/whatwg/html/issues">Issues GitHub pour WHATWG HTML (en anglais)</a></td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<p>{{Compat("html.elements.video")}}</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li><a href="/fr/docs/Web/HTML/Formats_pour_audio_video">Les formats pris en charge par <code>&lt;audio&gt;</code> et <code>&lt;video&gt;</code></a></li>
 <li>{{htmlelement("audio")}}</li>
 <li>Les propriétés CSS permettant de positionner/redimensionner le contenu : {{cssxref("object-position")}} and {{cssxref("object-fit")}}</li>
 <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Utiliser les éléments <code>&lt;audio&gt;</code> et <code>&lt;video&gt;</code></a></li>
 <li><a href="/fr/docs/HTML/Manipulating_video_using_canvas">Manipuler l'élément <code>&lt;video&gt;</code> avec <code>&lt;canvas&gt;</code></a></li>
 <li><a href="/fr/docs/Web/HTTP/Configuring_servers_for_Ogg_media">Configuration côté serveur pour les média Ogg</a></li>
</ul>