---
title: HTMLVideoElement
slug: Web/API/HTMLVideoElement
tags:
  - API
  - HTML DOM
  - HTMLVideoElement
  - Interface
  - Reference
  - Video
translation_of: Web/API/HTMLVideoElement
---
<div>{{APIRef("HTML DOM")}}</div>

<p><strong><code>L’interface HTMLVideoElement</code> </strong> fournit des propriétés et des méthodes spéciales pour manipuler des objets vidéo. Il hérite également des propriétés et des méthodes de {{domxref("HTMLMediaElement")}} et de {{domxref("HTMLElement")}}.</p>

<p>La liste des <a href="/fr/docs/Web/Media/Formats">formats multimédias pris en charge</a> varie d’un navigateur à l’autre. Vous pouvez fournir votre vidéo dans un format unique que tous les navigateurs pertinents prennent en charge, ou fournir plusieurs sources vidéo dans des formats suffisamment différents couverts par les différents navigateurs que vous ciblez.</p>

<p>{{InheritanceDiagram(600, 140)}}</p>

<h2 id="Propriétés">Propriétés</h2>

<p><em>Cette interface hérite des propriétés de ses interfaces ancêtres : </em><em>{{domxref("HTMLMediaElement")}} et </em><em>{{domxref("HTMLElement")}}.</em></p>

<dl>
 <dt>{{domxref("HTMLVideoElement.height")}}</dt>
 <dd>Une chaîne de caractères {{domxref("DOMString")}} qui reflète la valeur de l'attribut HTML {{htmlattrxref("height", "video")}} indiquant la hauteur de la zone d'affichage, en pixels.</dd>
 <dt>{{domxref("HTMLVideoElement.poster")}}</dt>
 <dd>Une chaîne de caractères {{domxref("DOMString")}} qui reflète la valeur de l'attribut {{htmlattrxref("poster", "video")}} qui indique une image à afficher tant qu'aucune donnée vidéo n'est disponible.</dd>
 <dt>{{domxref("HTMLVideoElement.videoHeight")}} {{readonlyInline}}</dt>
 <dd>Un entier non signé qui indique la hauteur intrinsèque de la ressource, exprimée en pixels CSS, ou 0 tant que le média n'est pas disponible.</dd>
 <dt>{{domxref("HTMLVideoElement.videoWidth")}} {{readonlyInline}}</dt>
 <dd>Un entier non signé qui indique la largeur intrinsèque de la ressource, exprimée en pixels CSS, ou 0 tant que le média n'est pas disponible.</dd>
 <dt>{{domxref("HTMLVideoElement.width")}}</dt>
 <dd>Une chaîne de caractères {{domxref("DOMString")}} qui reflète la valeur de l'attribut HTML {{htmlattrxref("width", "video")}} indiquant la largeur de la zone d'affichage, en pixels.</dd>
</dl>

<h3 id="Propriétés_spécifiques_à_Gecko">Propriétés spécifiques à Gecko</h3>

<dl>
 <dt>{{domxref("HTMLVideoElement.mozParsedFrames")}} {{Non-standard_Inline}}{{ReadOnlyInline}}</dt>
 <dd>Un entier non signé indiquant le nombre de <em>frames</em> qui ont été analysées (<em>parsed</em>) depuis la ressource média.</dd>
 <dt>{{domxref("HTMLVideoElement.mozDecodedFrames")}} {{Non-standard_Inline}}{{ReadOnlyInline}}</dt>
 <dd>Un entier non signé indiquant le nombre de <em>frames</em> qui ont été décodées en images.</dd>
 <dt>{{domxref("HTMLVideoElement.mozPresentedFrames")}} {{Non-standard_Inline}}{{ReadOnlyInline}}</dt>
 <dd>Un entier non signé indiquant le nombre de <em>frames</em> décodées qui ont été présentées au canal de rendu pour l'affichage.</dd>
 <dt>{{domxref("HTMLVideoElement.mozPaintedFrames")}} {{Non-standard_Inline}}{{ReadOnlyInline}}</dt>
 <dd>Un entier non signé indiquant le nombre de <em>frames</em> présentées et qui ont été affichées à l'écran.</dd>
 <dt>{{domxref("HTMLVideoElement.mozFrameDelay")}} {{Non-standard_Inline}}{{ReadOnlyInline}}</dt>
 <dd>Un double indiquant le retard, exprimé en secondes, pour l'affichage de la dernière <em>frame</em> affichée.</dd>
 <dt>{{domxref("HTMLVideoElement.mozHasAudio")}} {{Non-standard_Inline}}{{ReadOnlyInline}}</dt>
 <dd>Un booléen indiquant s'il y a de l'audio associé à cette vidéo.</dd>
</dl>

<h3 id="Propriétés_spécifiques_à_Microsoft">Propriétés spécifiques à Microsoft</h3>

<dl>
 <dt>{{DOMxRef("HTMLVideoElement.msFrameStep()")}} {{Non-standard_Inline}}</dt>
 <dd>Permet d'avancer ou de reculer la vidéo d'une <em>frame</em>.</dd>
 <dt>{{DOMxRef("HTMLVideoElement.msHorizontalMirror")}} {{Non-standard_Inline}}</dt>
 <dd>Permet d'indiquer ou de définir si la vidéo est inversée horizontalement dans l'affichage.</dd>
 <dt>{{DOMxRef("HTMLVideoElement.msInsertVideoEffect()")}} {{Non-standard_Inline}}</dt>
 <dd>Ajoute l'effet vidéo indiqué dans le canal de rendu.</dd>
 <dt>{{DOMxRef("HTMLVideoElement.msIsLayoutOptimalForPlayback")}} {{Non-standard_Inline}}{{ReadOnlyInline}}</dt>
 <dd>Indique si la vidéo peut être affichée plus efficacement.</dd>
 <dt>{{DOMxRef("HTMLVideoElement.msIsStereo3D")}} {{Non-standard_Inline}}{{ReadOnlyInline}}</dt>
 <dd>Un booléen qui détermine si le système considère que la vidéo chargée est en stéréo 3D. La valeur <code>true</code> indique que la source est en stéro 3D.</dd>
 <dt>{{DOMxRef("HTMLVideoElement.msZoom")}} {{Non-standard_Inline}}</dt>
 <dd>Contrôle si le cadre de la vidéo est réduit pour s'inscrire dans la zone d'affichage de la vidéo (autrement dit : si la vidéo est zoomée/tronquée pour s'inscrire dans la zone correspondante).</dd>
</dl>

<h2 id="Méthodes">Méthodes</h2>

<p><em>Hérite des méthodes de son parent {{domxref("HTMLMediaElement")}} et de son ancêtre {{domxref("HTMLElement")}}.</em></p>

<dl>
 <dt>{{domxref("HTMLVideoElement.getVideoPlaybackQuality()")}} {{experimental_inline}}</dt>
 <dd>Cette méthode renvoie un objet {{domxref("VideoPlaybackQuality")}} contenant les métriques/statistiques sur la lecture actuelle avec des informations comme le nombre d'images sautées ou corrompues ainsi que le nombre total d'images.</dd>
</dl>

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

<p><em>Hérite des méthodes de son parent {{domxref("HTMLMediaElement")}} et de son ancêtre {{domxref("HTMLElement")}}. </em>Pour écouter ces évènements, on utilisera <code><a href="/fr/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> ou on affectera un gestionnaire d'évènement avec la propriété <code>on&lt;NomEvenement&gt;</code> (ex. <code>onclick</code>) de l'interface.</p>

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

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">État</th>
   <th scope="col">Commentaires</th>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG', "#htmlvideoelement", "HTMLVideoElement")}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

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

<p>{{Compat("api.HTMLVideoElement")}}</p>

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

<ul>
 <li>L'élément HTML qui implémente cette interface {{HTMLElement("video")}}.</li>
 <li><a href="/fr/docs/Web/Media/Formats">Les formats médias pris en charge</a></li>
</ul>