mozilla

Revision 324135 of HTMLVideoElement

  • Revision slug: DOM/HTMLVideoElement
  • Revision title: HTMLVideoElement
  • Revision id: 324135
  • Created:
  • Creator: Yukoba
  • Is current revision? No
  • Comment

Revision Content

{{domref}}

HTML Video Element Interface

DOM video objects expose the HTMLVideoElement interface, which provides special properties (beyond the regular {{ domxref("element") }} object and {{ domxref("HTMLMediaElement") }} interfaces they also have available to them by inheritance) for manipulating video objects.

Properties

Name Type Description
height {{ domxref("DOMString") }} Reflects the {{ htmlattrxref("height", "video") }} HTML attribute, which specifies the height of the display area, in CSS pixels.
poster {{ domxref("DOMString") }} Reflects the {{ htmlattrxref("poster", "video") }} HTML attribute, which specifies an image to show while no video data is available.
videoHeight readonly unsigned long The intrinsic height of the resource in CSS pixels, taking into account the dimensions, aspect ratio, clean aperture, resolution, and so forth, as defined for the format used by the resource. If the element's ready state is HAVE_NOTHING, the value is 0.
videoWidth readonly unsigned long The intrinsic width of the resource in CSS pixels, taking into account the dimensions, aspect ratio, clean aperture, resolution, and so forth, as defined for the format used by the resource. If the element's ready state is HAVE_NOTHING, the value is 0.
width {{ domxref("DOMString") }} Reflects the {{ htmlattrxref("width", "video") }} HTML attribute, which specifies the width of the display area, in CSS pixels.

Gecko-specific properties

Name Type Description
{{ gecko_minversion_inline("5.0") }} mozParsedFrames unsigned long Readonly. A count of video frames that have been parsed from the media resource.
{{ gecko_minversion_inline("5.0") }} mozDecodedFrames unsigned long Readonly. A count of parsed video frames that have been decoded into Images.
{{ gecko_minversion_inline("5.0") }} mozPresentedFrames unsigned long Readonly. A count of decoded frames that have been presented to the rendering pipeline for painting.
{{ gecko_minversion_inline("5.0") }} mozPaintedFrames unsigned long Readonly. Number of presented frames which were painted on the screen.
{{ gecko_minversion_inline("5.0") }} mozFrameDelay double Readonly. Time which the last painted video frame was late by, in seconds.

Compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Video tag Yes {{ CompatGeckoDesktop("2.0") }} IE9 Yes (10.50) Yes
WebM Yes Yes No Yes No
Theora Yes Yes No Yes No
H.264 Yes No Yes No Yes
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{CompatUnknown}} {{ CompatGeckoMobile("2.0") }} IE9 {{CompatUnknown}} {{CompatUnknown}}

See also

Revision Source

<div>
  {{domref}}</div>
<h2 id="HTML_Video_Element_Interface" name="HTML_Video_Element_Interface">HTML Video Element Interface</h2>
<p>DOM <code>video</code> objects expose the <a class="external" href="http://www.w3.org/TR/html5/video.html#htmlvideoelement" title="http://www.w3.org/TR/html5/video.html#htmlvideoelement">HTMLVideoElement</a> interface, which provides special properties (beyond the regular {{ domxref("element") }} object and {{ domxref("HTMLMediaElement") }} interfaces they also have available to them by inheritance) for manipulating video objects.</p>
<h2 id="Properties">Properties</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Type</th>
      <th scope="col">Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>height</code></td>
      <td>{{ domxref("DOMString") }}</td>
      <td>Reflects the {{ htmlattrxref("height", "video") }} HTML attribute, which specifies the height of the display area, in CSS pixels.</td>
    </tr>
    <tr>
      <td><code>poster</code></td>
      <td>{{ domxref("DOMString") }}</td>
      <td>Reflects the {{ htmlattrxref("poster", "video") }} HTML attribute, which specifies an image to show while no video data is available.</td>
    </tr>
    <tr>
      <td><code>videoHeight</code></td>
      <td><code>readonly unsigned long</code></td>
      <td>The intrinsic height of the resource in CSS pixels, taking into account the dimensions, aspect ratio, clean aperture, resolution, and so forth, as defined for the format used by the resource. If the element's ready state is HAVE_NOTHING, the value is 0.</td>
    </tr>
    <tr>
      <td><code>videoWidth</code></td>
      <td><code>readonly unsigned long</code></td>
      <td>The intrinsic width of the resource in CSS pixels, taking into account the dimensions, aspect ratio, clean aperture, resolution, and so forth, as defined for the format used by the resource. If the element's ready state is HAVE_NOTHING, the value is 0.</td>
    </tr>
    <tr>
      <td><code>width</code></td>
      <td>{{ domxref("DOMString") }}</td>
      <td>Reflects the {{ htmlattrxref("width", "video") }} HTML attribute, which specifies the width of the display area, in CSS pixels.</td>
    </tr>
  </tbody>
</table>
<h2 id="Gecko-specific_properties" name="Gecko-specific_properties">Gecko-specific properties</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Type</th>
      <th scope="col">Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ gecko_minversion_inline("5.0") }} <code>mozParsedFrames</code></td>
      <td><code>unsigned long</code></td>
      <td><strong>Readonly</strong>. A count of video frames that have been parsed from the media resource.</td>
    </tr>
    <tr>
      <td>{{ gecko_minversion_inline("5.0") }} <code>mozDecodedFrames</code></td>
      <td><code>unsigned long</code></td>
      <td><strong>Readonly</strong>. A count of parsed video frames that have been decoded into Images.</td>
    </tr>
    <tr>
      <td>{{ gecko_minversion_inline("5.0") }} <code>mozPresentedFrames</code></td>
      <td><code>unsigned long</code></td>
      <td><strong>Readonly</strong>. A count of decoded frames that have been presented to the rendering pipeline for painting.</td>
    </tr>
    <tr>
      <td>{{ gecko_minversion_inline("5.0") }} <code>mozPaintedFrames</code></td>
      <td><code>unsigned long</code></td>
      <td><strong>Readonly</strong>. Number of presented frames which were painted on the screen.</td>
    </tr>
    <tr>
      <td>{{ gecko_minversion_inline("5.0") }} <code>mozFrameDelay</code></td>
      <td><code>double</code></td>
      <td><strong>Readonly</strong>. Time which the last painted video frame was late by, in seconds.</td>
    </tr>
  </tbody>
</table>
<h2 id="Compatibility">Compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Video tag</td>
        <td>Yes</td>
        <td>{{ CompatGeckoDesktop("2.0") }}</td>
        <td>IE9</td>
        <td>Yes (10.50)</td>
        <td>Yes</td>
      </tr>
      <tr>
        <td>WebM</td>
        <td>Yes</td>
        <td>Yes</td>
        <td>No</td>
        <td>Yes</td>
        <td>No</td>
      </tr>
      <tr>
        <td>Theora</td>
        <td>Yes</td>
        <td>Yes</td>
        <td>No</td>
        <td>Yes</td>
        <td>No</td>
      </tr>
      <tr>
        <td>H.264</td>
        <td>Yes</td>
        <td>No</td>
        <td>Yes</td>
        <td>No</td>
        <td>Yes</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{CompatUnknown}}</td>
        <td>{{ CompatGeckoMobile("2.0") }}</td>
        <td>IE9</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also" name="See_also">See also</h2>
<ul>
  <li>{{htmlelement("video")}}</li>
  <li>{{ domxref("HTMLAudioElement") }}</li>
  <li>{{ domxref("HTMLMediaElement") }}</li>
  <li><a class="external" href="http://people.mozilla.org/~cpearce/paint-stats-demo.html">Demo of video paint statistics</a></li>
</ul>
Revert to this revision