HTMLMediaElement

  • Revision slug: Web/API/HTMLMediaElement
  • Revision title: HTMLMediaElement
  • Revision id: 414271
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

{{ DomRef() }}

The HTMLMediaElement interface has special properties and methods (beyond the properties and methods available for all children of {{domxref("HTMLElement")}}), that are common to all media-related objects.

This interface is inherited by {{domxref("HTMLVideoElement")}} and {{domxref("HTMLAudioElement")}}.

Properties

Name Type Description
audioTracks {{domxref("AudioTrackList")}} Represents the list of {{domxref("AudioTrack")}} objects contained in the element.
autoplay {{domxref("Boolean")}} Reflects the {{ htmlattrxref("autoplay", "video") }} HTML attribute, indicating whether playback should automatically begin as soon as enough media is available to do so without interruption.
buffered {{readonlyinline}} {{ domxref("TimeRanges") }} The ranges of the media source that the browser has buffered (if any) at the moment the buffered property is accessed. The returned {{ domxref("TimeRanges") }} object is normalized.
controller {{ domxref("MediaController")}} Represents the media controller associated to the element, or null if none is linked to it.
controls {{domxref("Boolean")}} Reflects the {{ htmlattrxref("controls", "video") }} HTML attribute, indicating whether user interface items for controlling the resource should be displayed.
crossOrigin {{ domxref("DOMString") }} The CORS setting for this image element. See CORS settings attributes for details.
currentSrc {{readonlyinline}} {{ domxref("DOMString") }} The absolute URL of the chosen media resource (if, for example, the server selects a media file based on the resolution of the user's display), or an empty string if the networkState is EMPTY.
currentTime double The current playback time, in seconds. Setting this value seeks the media to the new time.
defaultMuted {{domxref("Boolean")}} Reflects the {{ htmlattrxref("muted", "video") }} HTML attribute, indicating whether the media element's audio output should be muted by default. This property has no dynamic effect, to mute and unmute the audio output, use the muted property.
defaultPlaybackRate double The default playback rate for the media. 1.0 is "normal speed," values lower than 1.0 make the media play slower than normal, higher values make it play faster. The value 0.0 is invalid and throws a NOT_SUPPORTED_ERR exception.
duration {{readonlyinline}} double The length of the media in seconds, or zero if no media data is available.  If the media data is available but the length is unknown, this value is NaN.  If the media is streamed and has no predefined length, the value is Inf.
ended {{readonlyinline}} {{domxref("Boolean")}} Indicates whether the media element has ended playback.
error {{readonlyinline}} {{ domxref("MediaError") }} The {{domxref("MediaError")}} object for the most recent error, or null if there has not been an error.
initialTime {{readonlyinline}} {{ non-standard_inline() }} {{deprecated_inline}} double The initial playback position in seconds.
loop {{domxref("Boolean")}} Reflects the {{ htmlattrxref("loop", "video") }} HTML attribute, indicating whether the media element should start over when it reaches the end.
mediaGroup {{domxref("DOMString")}} Reflects the {{ htmlattrxref("mediagroup", "video")}} HTML attribute, indicating the name of the group of elements it belongs to. A group of media elements shares a common controller.
mozChannels {{readonlyinline}} {{ non-standard_inline() }} long The number of channels in the audio resource (e.g., 2 for stereo).  {{ gecko_minversion_inline("2.0") }}
mozFrameBufferLength {{ non-standard_inline() }} long

Indicates the number of samples that will be returned in the framebuffer of each MozAudioAvailable event. This number is a total for all channels, and by default is set to be the number of channels * 1024 (e.g., 2 channels * 1024 samples = 2048 total).

The mozFrameBufferLength property can be set to a new value, for lower latency, or larger amounts of data, etc. The size given must be a number between 512 and 16384. Using any other size results in an exception being thrown. The best time to set a new length is after the loadedmetadata event fires, when the audio info is known, but before the audio has started or MozAudioAvailable events have begun firing. {{ gecko_minversion_inline("2.0") }}

mozSampleRate {{readonlyinline}} {{ non-standard_inline() }} long The number of samples per second that will be played, for example 44100. {{ gecko_minversion_inline("2.0") }}
mozSrcObject {{ non-standard_inline() }} {{domxref("MediaStream")}} Allows to set or get the Media Stream to be played or being played.
muted {{domxref("Boolean")}} true if the audio is muted, and false otherwise.
networkState unsigned short

The current state of fetching the media over the network.

Constant Value Description
NETWORK_EMPTY 0 There is no data yet.  The readyState is also HAVE_NOTHING.
NETWORK_IDLE 1  
NETWORK_LOADING 2 The media is loading.
NETWORK_NO_SOURCE{{ ref("1") }} 3  
paused {{readonlyinline}} {{domxref("Boolean")}} Indicates whether the media element is paused.
playbackRate double

The current rate at which the media is being played back. This is used to implement user controls for fast forward, slow motion, and so forth. The normal playback rate is multiplied by this value to obtain the current rate, so a value of 1.0 indicates normal speed.
If the playbackRate is negative, the media is played backwards.
The audio is muted when the media plays backwards or if the fast forward or slow motion is outside a useful range (E.g. Gecko mute the sound outside the range 0.25 and 5.0).
The pitch of the audio is corrected by default and is the same for every speed. Some navigators implement the non-standard preservespitch property to control this.

played {{readonlyinline}} {{ domxref("TimeRanges") }} The ranges of the media source that the browser has played, if any.
preload {{ domxref("DOMString") }} Reflects the {{ htmlattrxref("preload", "video") }} HTML attribute, indicating what data should be preloaded, if any. Possible values are: none, metadata, auto. See {{ htmlattrxref("preload", "video") }} attribute documentation for details.
readyState {{readonlyinline}} unsigned short

The readiness state of the media.

Constant Value Description
HAVE_NOTHING 0 No information is available about the media resource.
HAVE_METADATA 1 Enough of the media resource has been retrieved that the metadata attributes are initialized.  Seeking will no longer raise an exception.
HAVE_CURRENT_DATA 2 Data is available for the current playback position, but not enough to actually play more than one frame.
HAVE_FUTURE_DATA 3 Data for the current playback position as well as for at least a little bit of time into the future is available (in other words, at least two frames of video, for example).
HAVE_ENOUGH_DATA 4 Enough data is available—and the download rate is high enough—that the media can be played through to the end without interruption.
seekable {{readonlyinline}} {{ domxref("TimeRanges") }} The time ranges that the user is able to seek to, if any.
seeking {{readonlyinline}} {{domxref("Boolean")}} Indicates whether the media is in the process of seeking to a new position.
src {{ domxref("DOMString") }} Reflects the {{ htmlattrxref("src", "video") }} HTML attribute, containing the URL of a media resource to use.
Gecko implements a similar functionality is available for streams: mozSrcObject.
textTracks {{domxref("TextTrackList")}} Represents the list of {{domxref("TextTrack")}} objects contained in the element.
videoTracks {{domxref("VideoTrackList")}} Represents the list of {{domxref("VideoTrack")}} objects contained in the element.
volume double The audio volume, from 0.0 (silent) to 1.0 (loudest).

Methods

Name & Arguments Return Description
canPlayType(in {{ domxref("DOMString") }} type)

{{ domxref("DOMString") }}

  • probably: if the specified type appears to be playable.
  • maybe: if it's impossible to tell whether the type is playable without playing it.
  • The empty string: if the specified type definitely cannot be played.
Determines whether the specified media type can be played back.
fastSeek(double time)    
load() void Begins loading the media content from the server.
mozGetMetadata(){{ non-standard_inline() }} Object

The mozGetMetadata method returns a javascript object whose properties represent metadata from the playing media resource as {key: value} pairs. A separate copy of the data is returned each time the method is called.

This method must be called after the loadedmetadata event fires.

 {{ gecko_minversion_inline("17.0") }}

mozLoadFrom(HTMLMediaElement other){{ non-standard_inline() }} void

This method, available only in Mozilla's implementation, loads data from another media element. This works similarly to load() except that instead of running the normal resource selection algorithm, the source is simply set to the other element's currentSrc.

This is optimized so this element gets access to all of the other element's cached and buffered data; in fact, the two elements share downloaded data so that data downloaded by either element is available to both.

 {{ gecko_minversion_inline("1.9.2") }}

pause() void Pauses the media playback.
play() void Begins playback of the media. If you have changed the src attribute of the media element since the page was loaded, you must call load() before play(), otherwise the original media plays again.

Specifications

Specification Status Comment
{{SpecName('HTML WHATWG', "the-video-element.html#htmlmediaelement", "HTMLMediaElement")}} {{Spec2('HTML WHATWG')}} No change from {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement")}} {{Spec2('HTML5 W3C')}} Initial definition.

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support {{ CompatVersionUnknown() }} {{ CompatGeckoDesktop("1.9.1") }} {{ref("1")}} {{ CompatIE("9") }} {{ CompatUnknown() }} {{ CompatUnknown() }}`
buffered property {{ CompatVersionUnknown() }} {{ CompatGeckoDesktop("2.0") }} {{ CompatIE("9") }} {{ CompatUnknown() }} {{ CompatUnknown() }}
defaultMuted property {{ CompatVersionUnknown() }} {{ CompatGeckoDesktop("11.0") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
loop property {{ CompatVersionUnknown() }} {{ CompatGeckoDesktop("11.0") }} {{ CompatIE("9") }} {{ CompatUnknown() }} {{ CompatUnknown() }}
seekable property {{ CompatVersionUnknown() }} {{ CompatGeckoDesktop("8.0") }} {{ CompatIE("9") }} {{ CompatUnknown() }} {{ CompatUnknown() }}
defaultPlaybackRate property {{ CompatVersionUnknown() }} {{ CompatGeckoDesktop("20.0") }} {{ CompatIE("9") }} {{ CompatUnknown() }} {{ CompatUnknown() }}
playbackRate property {{ CompatVersionUnknown() }} {{ CompatGeckoDesktop("20.0") }} {{ CompatIE("9") }} {{ CompatUnknown() }} {{ CompatUnknown() }}
preservesPitch property {{non-standard_inline}} {{ CompatVersionUnknown() }}{{property_prefix("webkit")}} {{ CompatGeckoDesktop("20.0") }}{{property_prefix("moz")}} {{ CompatNo()}} {{ CompatNo()}} {{ CompatNo()}}
preload property {{ CompatVersionUnknown() }} {{ CompatGeckoDesktop("2.0") }} (implemented autobuffer previously) {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
played property {{ CompatVersionUnknown() }} {{ CompatGeckoDesktop("15.0") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
crossOrigin property {{ CompatVersionUnknown() }} {{ CompatGeckoDesktop("12.0") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
mozSrcObject property {{non-standard_inline}} {{CompatNo}} {{ CompatGeckoDesktop("18.0") }} {{CompatNo}} {{CompatNo}} {{CompatNo}}
initialTime property {{ non-standard_inline() }} {{ CompatUnknown() }} {{ CompatGeckoDesktop("9.0") }}, removed in {{ CompatGeckoDesktop("23.0")}} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
fastSeek method {{ CompatUnknown() }} {{ CompatNo}} {{bug("847375")}} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
startDate property {{ CompatUnknown() }} {{ CompatNo}} {{bug("847376")}} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
mediaGroup and controller properties {{ CompatUnknown() }} {{ CompatNo}} {{bug("847377")}} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
audioTracks, and videoTracks properties {{ CompatUnknown() }} {{ CompatNo}} {{bug("744896")}} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
textTracks property {{ CompatUnknown() }} On Nightly, behind the media.webvtt.enabled preference. {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}
buffered property {{ CompatVersionUnknown() }} {{ CompatGeckoMobile("2.0") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
defaultMuted property {{ CompatVersionUnknown() }} {{ CompatGeckoMobile("11.0") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
loop property {{ CompatVersionUnknown() }} {{ CompatGeckoMobile("11.0") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
seekable property {{ CompatVersionUnknown() }} {{ CompatGeckoMobile("8.0") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
defaultPlaybackRate property {{ CompatVersionUnknown() }} {{ CompatGeckoMobile("20.0") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
playbackRate property {{ CompatVersionUnknown() }} {{ CompatGeckoMobile("20.0") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
preservesPitch property {{non-standard_inline}} {{ CompatVersionUnknown() }}{{property_prefix("webkit")}} {{ CompatGeckoMobile("20.0") }}{{property_prefix("moz")}} {{ CompatNo}} {{ CompatNo}} {{ CompatNo}}
preload property {{ CompatVersionUnknown() }} {{ CompatGeckoMobile("2.0") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
played property {{ CompatVersionUnknown() }} {{ CompatGeckoMobile("15.0") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
crossOrigin property {{ CompatVersionUnknown() }} {{ CompatGeckoMobile("12.0") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
mozSrcObject property {{non-standard_inline}} {{CompatNo}} {{ CompatGeckoMobile("18.0") }} {{CompatNo}} {{CompatNo}} {{CompatNo}}
initialTime property {{ non-standard_inline() }} {{ CompatUnknown() }} {{ CompatGeckoMobile("9.0") }}, removed in {{ CompatGeckoMobile("23.0")}} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
fastSeek method {{ CompatUnknown() }} {{ CompatNo}} {{bug("847375")}} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
startDate property {{ CompatUnknown() }} {{ CompatNo}} {{bug("847376")}} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
mediaGroup and controller properties {{ CompatUnknown() }} {{ CompatNo}} {{bug("847377")}} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
audioTracks, and videoTracks properties {{ CompatUnknown() }} {{ CompatNo}} {{bug("744896")}} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
textTracks property {{ CompatUnknown() }} On Nightly, behind the media.webvtt.enabled preference. {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

{{ endnote("1") }} The NETWORK_LOADED state was removed to align with the HTML spec in Gecko 2.0 (Firefox 4).

See also

Revision Source

<div>
  {{ DomRef() }}</div>
<p>The <strong><code>HTMLMediaElement</code></strong> interface has special properties and methods (beyond the properties and methods available for all children of {{domxref("HTMLElement")}}), that are common to all media-related objects.</p>
<p>This interface is inherited by {{domxref("HTMLVideoElement")}} and {{domxref("HTMLAudioElement")}}.</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>audioTracks</code></td>
      <td>{{domxref("AudioTrackList")}}</td>
      <td>Represents the list of {{domxref("AudioTrack")}} objects contained in the element.</td>
    </tr>
    <tr>
      <td><code>autoplay</code></td>
      <td>{{domxref("Boolean")}}</td>
      <td>Reflects the {{ htmlattrxref("autoplay", "video") }} HTML attribute, indicating whether playback should automatically begin as soon as enough media is available to do so without interruption.</td>
    </tr>
    <tr>
      <td><code>buffered </code>{{readonlyinline}}</td>
      <td>{{ domxref("TimeRanges") }}</td>
      <td>The ranges of the media source that the browser has buffered (if any) at the moment the <code>buffered</code> property is accessed. The returned {{ domxref("TimeRanges") }} object is <em>normalized.</em></td>
    </tr>
    <tr>
      <td><code>controller</code></td>
      <td>{{ domxref("MediaController")}}</td>
      <td>Represents the media controller associated to the element, or <code>null</code> if none is linked to it.</td>
    </tr>
    <tr>
      <td><code>controls</code></td>
      <td>{{domxref("Boolean")}}</td>
      <td>Reflects the {{ htmlattrxref("controls", "video") }} HTML attribute, indicating whether user interface items for controlling the resource should be displayed.</td>
    </tr>
    <tr>
      <td><code>crossOrigin</code></td>
      <td>{{ domxref("DOMString") }}</td>
      <td>The CORS setting for this image element. See <a href="/en-US/docs/HTML/CORS_settings_attributes" title="HTML/CORS settings attributes">CORS settings attributes</a> for details.</td>
    </tr>
    <tr>
      <td><code>currentSrc</code> {{readonlyinline}}</td>
      <td>{{ domxref("DOMString") }}</td>
      <td>The absolute URL of the chosen media resource (if, for example, the server selects a media file based on the resolution of the user's display), or an empty string if the <code>networkState</code> is <code>EMPTY</code>.</td>
    </tr>
    <tr>
      <td><code>currentTime</code></td>
      <td><code>double</code></td>
      <td>The current playback time, in seconds. Setting this value seeks the media to the new time.</td>
    </tr>
    <tr>
      <td><code>defaultMuted</code></td>
      <td>{{domxref("Boolean")}}</td>
      <td>Reflects the {{ htmlattrxref("muted", "video") }} HTML attribute, indicating whether the media element's audio output should be muted by default. This property has no dynamic effect, to mute and unmute the audio output, use the <code>muted</code> property.</td>
    </tr>
    <tr>
      <td><code>defaultPlaybackRate</code></td>
      <td><code>double</code></td>
      <td>The default playback rate for the media. 1.0 is "normal speed," values lower than 1.0 make the media play slower than normal, higher values make it play faster. The value 0.0 is invalid and throws a <code>NOT_SUPPORTED_ERR</code> exception.</td>
    </tr>
    <tr>
      <td><code>duration </code>{{readonlyinline}}</td>
      <td><code>double</code></td>
      <td>The length of the media in seconds, or zero if no media data is available.&nbsp; If the media data is available but the length is unknown, this value is <code>NaN</code>.&nbsp; If the media is streamed and has no predefined length, the value is <code>Inf</code>.</td>
    </tr>
    <tr>
      <td><code>ended </code>{{readonlyinline}}</td>
      <td>{{domxref("Boolean")}}</td>
      <td>Indicates whether the media element has ended playback.</td>
    </tr>
    <tr>
      <td><code>error </code>{{readonlyinline}}</td>
      <td>{{ domxref("MediaError") }}</td>
      <td>The {{domxref("MediaError")}} object for the most recent error, or <code>null</code> if there has not been an error.</td>
    </tr>
    <tr>
      <td><code>initialTime </code>{{readonlyinline}} {{ non-standard_inline() }} {{deprecated_inline}}</td>
      <td><code>double</code></td>
      <td>The initial playback position in seconds.</td>
    </tr>
    <tr>
      <td><code>loop</code></td>
      <td>{{domxref("Boolean")}}</td>
      <td>Reflects the {{ htmlattrxref("loop", "video") }} HTML attribute, indicating whether the media element should start over when it reaches the end.</td>
    </tr>
    <tr>
      <td><code>mediaGroup</code></td>
      <td>{{domxref("DOMString")}}</td>
      <td>Reflects the {{ htmlattrxref("mediagroup", "video")}} HTML attribute, indicating the name of the group of elements it belongs to. A group of media elements shares a common <code>controller</code>.</td>
    </tr>
    <tr>
      <td><code>mozChannels </code>{{readonlyinline}} {{ non-standard_inline() }}</td>
      <td><code>long</code></td>
      <td>The number of channels in the audio resource (e.g., 2 for stereo).<strong>&nbsp;</strong> {{ gecko_minversion_inline("2.0") }}</td>
    </tr>
    <tr>
      <td><code>mozFrameBufferLength</code> {{ non-standard_inline() }}</td>
      <td><code>long</code></td>
      <td>
        <p>Indicates the number of samples that will be returned in the framebuffer of each <code>MozAudioAvailable</code> event. This number is a total for all channels, and by default is set to be the number of channels * 1024 (e.g., 2 channels * 1024 samples = 2048 total).</p>
        <p>The <code>mozFrameBufferLength</code> property can be set to a new value, for lower latency, or larger amounts of data, etc. The size given <em>must</em> be a number between 512 and 16384. Using any other size results in an exception being thrown. The best time to set a new length is after the <code>loadedmetadata</code> event fires, when the audio info is known, but before the audio has started or <code>MozAudioAvailable</code> events have begun firing. {{ gecko_minversion_inline("2.0") }}</p>
      </td>
    </tr>
    <tr>
      <td><code>mozSampleRate </code>{{readonlyinline}} {{ non-standard_inline() }}</td>
      <td><code>long</code></td>
      <td>The number of samples per second that will be played, for example 44100. {{ gecko_minversion_inline("2.0") }}</td>
    </tr>
    <tr>
      <td><code>mozSrcObject </code>{{ non-standard_inline() }}</td>
      <td>{{domxref("MediaStream")}}</td>
      <td>Allows to set or get the <a href="/en-US/docs/WebRTC/MediaStream_API" title="/en-US/docs/WebRTC/MediaStream_API">Media Stream</a> to be played or being played.</td>
    </tr>
    <tr>
      <td><code>muted</code></td>
      <td>{{domxref("Boolean")}}</td>
      <td><code>true</code> if the audio is muted, and <code>false</code> otherwise.</td>
    </tr>
    <tr>
      <td><code>networkState</code></td>
      <td><code>unsigned short</code></td>
      <td>
        <p>The current state of fetching the media over the network.</p>
        <table class="standard-table">
          <tbody>
            <tr>
              <td class="header">Constant</td>
              <td class="header">Value</td>
              <td class="header">Description</td>
            </tr>
            <tr>
              <td><code>NETWORK_EMPTY</code></td>
              <td>0</td>
              <td>There is no data yet.&nbsp; The <code>readyState</code> is also <code>HAVE_NOTHING</code>.</td>
            </tr>
            <tr>
              <td><code>NETWORK_IDLE</code></td>
              <td>1</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td><code>NETWORK_LOADING</code></td>
              <td>2</td>
              <td>The media is loading.</td>
            </tr>
            <tr>
              <td><code>NETWORK_NO_SOURCE</code>{{ ref("1") }}</td>
              <td>3</td>
              <td>&nbsp;</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <tr>
      <td><code>paused </code>{{readonlyinline}}</td>
      <td>{{domxref("Boolean")}}</td>
      <td>Indicates whether the media element is paused.</td>
    </tr>
    <tr>
      <td><code>playbackRate</code></td>
      <td><code>double</code></td>
      <td>
        <p>The current rate at which the media is being played back. This is used to implement user controls for fast forward, slow motion, and so forth. The normal playback rate is multiplied by this value to obtain the current rate, so a value of 1.0 indicates normal speed.<br />
          If the playbackRate is negative, the media is played backwards.<br />
          The audio is muted when the media plays backwards or if the fast forward or slow motion is outside a useful range (E.g. Gecko mute the sound outside the range <code>0.25</code> and <code>5.0</code>).<br />
          The pitch of the audio is corrected by default and is the same for every speed. Some navigators implement the non-standard <code>preservespitch</code> property to control this.</p>
      </td>
    </tr>
    <tr>
      <td><code>played</code> {{readonlyinline}}</td>
      <td>{{ domxref("TimeRanges") }}</td>
      <td>The ranges of the media source that the browser has played, if any<strong>.</strong></td>
    </tr>
    <tr>
      <td><code>preload</code></td>
      <td>{{ domxref("DOMString") }}</td>
      <td>Reflects the {{ htmlattrxref("preload", "video") }} HTML attribute, indicating what data should be preloaded, if any. Possible values are: <code>none</code>, <code>metadata</code>, <code>auto</code>. See {{ htmlattrxref("preload", "video") }} attribute documentation for details.</td>
    </tr>
    <tr>
      <td><code>readyState </code>{{readonlyinline}}</td>
      <td><code>unsigned short</code></td>
      <td>
        <p>The readiness state of the media.</p>
        <table class="standard-table">
          <tbody>
            <tr>
              <td class="header">Constant</td>
              <td class="header">Value</td>
              <td class="header">Description</td>
            </tr>
            <tr>
              <td><code>HAVE_NOTHING</code></td>
              <td>0</td>
              <td>No information is available about the media resource.</td>
            </tr>
            <tr>
              <td><code>HAVE_METADATA</code></td>
              <td>1</td>
              <td>Enough of the media resource has been retrieved that the metadata attributes are initialized.&nbsp; Seeking will no longer raise an exception.</td>
            </tr>
            <tr>
              <td><code>HAVE_CURRENT_DATA</code></td>
              <td>2</td>
              <td>Data is available for the current playback position, but not enough to actually play more than one frame.</td>
            </tr>
            <tr>
              <td><code>HAVE_FUTURE_DATA</code></td>
              <td>3</td>
              <td>Data for the current playback position as well as for at least a little bit of time into the future is available (in other words, at least two frames of video, for example).</td>
            </tr>
            <tr>
              <td><code>HAVE_ENOUGH_DATA</code></td>
              <td>4</td>
              <td>Enough data is available—and the download rate is high enough—that the media can be played through to the end without interruption.</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <tr>
      <td><code>seekable </code>{{readonlyinline}}</td>
      <td>{{ domxref("TimeRanges") }}</td>
      <td>The time ranges that the user is able to seek to, if any<strong>.</strong></td>
    </tr>
    <tr>
      <td><code>seeking </code>{{readonlyinline}}</td>
      <td>{{domxref("Boolean")}}</td>
      <td>Indicates whether the media is in the process of seeking to a new position.</td>
    </tr>
    <tr>
      <td><code>src</code></td>
      <td>{{ domxref("DOMString") }}</td>
      <td>Reflects the {{ htmlattrxref("src", "video") }} HTML attribute, containing the URL of a media resource to use.<br />
        Gecko implements a similar functionality is available for streams: <code>mozSrcObject</code>.</td>
    </tr>
    <tr>
      <td><code>textTracks</code></td>
      <td>{{domxref("TextTrackList")}}</td>
      <td>Represents the list of {{domxref("TextTrack")}} objects contained in the element.</td>
    </tr>
    <tr>
      <td><code>videoTracks</code></td>
      <td>{{domxref("VideoTrackList")}}</td>
      <td>Represents the list of {{domxref("VideoTrack")}} objects contained in the element.</td>
    </tr>
    <tr>
      <td><code>volume</code></td>
      <td><code>double</code></td>
      <td>The audio volume, from 0.0 (silent) to 1.0 (loudest).</td>
    </tr>
  </tbody>
</table>
<h2 id="Methods">Methods</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Name &amp; Arguments</th>
      <th scope="col">Return</th>
      <th scope="col">Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>canPlayType(in </code>{{ domxref("DOMString") }}<code> type)</code></td>
      <td>
        <p>{{ domxref("DOMString") }}</p>
        <ul>
          <li><code>probably</code>: if the specified type appears to be playable.</li>
          <li><code>maybe</code>: if it's impossible to tell whether the type is playable without playing it.</li>
          <li>The <em>empty string</em>: if the specified type definitely cannot be played.</li>
        </ul>
      </td>
      <td>Determines whether the specified media type can be played back.</td>
    </tr>
    <tr>
      <td><code>fastSeek(double time)</code></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>load()</code></td>
      <td><code>void</code></td>
      <td>Begins loading the media content from the server.</td>
    </tr>
    <tr>
      <td><code>mozGetMetadata()</code>{{ non-standard_inline() }}</td>
      <td><code>Object</code></td>
      <td>
        <p>The <code>mozGetMetadata</code> method returns a javascript object whose properties represent metadata from the playing media resource as {key: value} pairs. A separate copy of the data is returned each time the method is called.</p>
        <p>This method must be called after the <code>loadedmetadata</code> event fires.</p>
        <p>&nbsp;{{ gecko_minversion_inline("17.0") }}</p>
      </td>
    </tr>
    <tr>
      <td><code>mozLoadFrom(HTMLMediaElement other)</code>{{ non-standard_inline() }}</td>
      <td><code>void</code></td>
      <td>
        <p>This method, available only in Mozilla's implementation, loads data from another media element. This works similarly to <code>load()</code> except that instead of running the normal resource selection algorithm, the source is simply set to the <code>other</code> element's <code>currentSrc</code>.</p>
        <p>This is optimized so this element gets access to all of the <code>other</code> element's cached and buffered data; in fact, the two elements share downloaded data so that data downloaded by either element is available to both.</p>
        <p>&nbsp;{{ gecko_minversion_inline("1.9.2") }}</p>
      </td>
    </tr>
    <tr>
      <td><code>pause()</code></td>
      <td><code>void</code></td>
      <td>Pauses the media playback.</td>
    </tr>
    <tr>
      <td><code>play()</code></td>
      <td><code>void</code></td>
      <td>Begins playback of the media. If you have changed the <strong>src</strong> attribute of the media element since the page was loaded, you must call load() before play(), otherwise the original media plays again.</td>
    </tr>
  </tbody>
</table>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
  <tbody>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
    <tr>
      <td>{{SpecName('HTML WHATWG', "the-video-element.html#htmlmediaelement", "HTMLMediaElement")}}</td>
      <td>{{Spec2('HTML WHATWG')}}</td>
      <td>No change from {{SpecName('HTML5 W3C')}}</td>
    </tr>
    <tr>
      <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement")}}</td>
      <td>{{Spec2('HTML5 W3C')}}</td>
      <td>Initial definition.</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility">Browser 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>Basic support</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatGeckoDesktop("1.9.1") }} {{ref("1")}}</td>
        <td>{{ CompatIE("9") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}`</td>
      </tr>
      <tr>
        <td><code>buffered</code> property</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatGeckoDesktop("2.0") }}</td>
        <td>{{ CompatIE("9") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>defaultMuted</code> property</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatGeckoDesktop("11.0") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>loop</code> property</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatGeckoDesktop("11.0") }}</td>
        <td>{{ CompatIE("9") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>seekable</code> property</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatGeckoDesktop("8.0") }}</td>
        <td>{{ CompatIE("9") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>defaultPlaybackRate</code> property</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatGeckoDesktop("20.0") }}</td>
        <td>{{ CompatIE("9") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>playbackRate</code> property</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatGeckoDesktop("20.0") }}</td>
        <td>{{ CompatIE("9") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>preservesPitch</code> property {{non-standard_inline}}</td>
        <td>{{ CompatVersionUnknown() }}{{property_prefix("webkit")}}</td>
        <td>{{ CompatGeckoDesktop("20.0") }}{{property_prefix("moz")}}</td>
        <td>{{ CompatNo()}}</td>
        <td>{{ CompatNo()}}</td>
        <td>{{ CompatNo()}}</td>
      </tr>
      <tr>
        <td><code>preload</code> property</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatGeckoDesktop("2.0") }} (implemented <code>autobuffer</code> previously)</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>played</code> property</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatGeckoDesktop("15.0") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>crossOrigin</code> property</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatGeckoDesktop("12.0") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>mozSrcObject</code> property {{non-standard_inline}}</td>
        <td>{{CompatNo}}</td>
        <td>{{ CompatGeckoDesktop("18.0") }}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
      </tr>
      <tr>
        <td><code>initialTime</code> property {{ non-standard_inline() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatGeckoDesktop("9.0") }}, removed in {{ CompatGeckoDesktop("23.0")}}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>fastSeek</code> method</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatNo}} {{bug("847375")}}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>startDate</code> property</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatNo}} {{bug("847376")}}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>mediaGroup</code> and <code>controller</code> properties</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatNo}} {{bug("847377")}}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>audioTracks</code>, and <code>videoTracks</code> properties</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatNo}} {{bug("744896")}}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>textTracks</code> property</td>
        <td>{{ CompatUnknown() }}</td>
        <td>On Nightly, behind the <code>media.webvtt.enabled</code> preference.</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>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>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
      <tr>
        <td><code>buffered</code> property</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatGeckoMobile("2.0") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>defaultMuted</code> property</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatGeckoMobile("11.0") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>loop</code> property</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatGeckoMobile("11.0") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>seekable</code> property</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatGeckoMobile("8.0") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>defaultPlaybackRate</code> property</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatGeckoMobile("20.0") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>playbackRate</code> property</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatGeckoMobile("20.0") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>preservesPitch</code> property {{non-standard_inline}}</td>
        <td>{{ CompatVersionUnknown() }}{{property_prefix("webkit")}}</td>
        <td>{{ CompatGeckoMobile("20.0") }}{{property_prefix("moz")}}</td>
        <td>{{ CompatNo}}</td>
        <td>{{ CompatNo}}</td>
        <td>{{ CompatNo}}</td>
      </tr>
      <tr>
        <td><code>preload</code> property</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatGeckoMobile("2.0") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>played</code> property</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatGeckoMobile("15.0") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>crossOrigin</code> property</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatGeckoMobile("12.0") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>mozSrcObject</code> property {{non-standard_inline}}</td>
        <td>{{CompatNo}}</td>
        <td>{{ CompatGeckoMobile("18.0") }}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
      </tr>
      <tr>
        <td><code>initialTime</code> property {{ non-standard_inline() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatGeckoMobile("9.0") }}, removed in {{ CompatGeckoMobile("23.0")}}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>fastSeek</code> method</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatNo}} {{bug("847375")}}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>startDate</code> property</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatNo}} {{bug("847376")}}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>mediaGroup</code> and <code>controller</code> properties</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatNo}} {{bug("847377")}}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>audioTracks</code>, and <code>videoTracks</code> properties</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatNo}} {{bug("744896")}}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>textTracks</code> property</td>
        <td>{{ CompatUnknown() }}</td>
        <td>On Nightly, behind the <code>media.webvtt.enabled</code> preference.</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<p>{{ endnote("1") }} The <code>NETWORK_LOADED</code> state was removed to align with the HTML spec in Gecko 2.0 (Firefox 4).</p>
<h2 id="See_also">See also</h2>
<ul>
  <li>References
    <ul>
      <li>{{ HTMLElement("video") }} and {{HTMLElement("audio")}} HTML elements.</li>
      <li>{{ domxref("HTMLVideoElement") }} and {{ domxref("HTMLAudioElement") }} interfaces, derived from <code>HTMLMediaElement</code>.</li>
    </ul>
  </li>
  <li>Articles
    <ul>
      <li><a class="internal" href="/en-US/docs/Using_HTML5_audio_and_video" title="Using HTML5 audio and video">Using HTML5 audio and video</a></li>
      <li><a class="internal" href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements" title="Media formats supported by the audio and video elements">Media formats supported by the audio and video elements</a></li>
      <li><a href="/en-US/docs/Web_Audio_API" title="/en-US/docs/Web_Audio_API">Web Audio API</a></li>
    </ul>
  </li>
</ul>
Revert to this revision