JavaScript HTMLMediaElement : HTMLElement

HTMLMediaElement is the base class for the HTMLAudioElement and the HTMLVideoElement.

Spec

Instance Properties

audioTracks : AudioTrackList readonly

autoplay : Boolean

buffered : TimeRanges readonly

controller : MediaController

controls : Boolean

crossOrigin : String

currentSrc : String readonly

currentTime : Number

defaultMuted : Boolean

defaultPlaybackRate : Number

duration : Number readonly

The duration of the media in seconds. May return NaN or Infinity if the duration is not known yet.

ended : Boolean readonly

Returns true when the media has played to the end.

error : MediaError readonly

loop : Boolean

mediaGroup : String

muted : Boolean

networkState : Number readonly

paused : Boolean readonly

Returns true if the media is paused. Use pause() and play() methods to pause and play the media.

playbackRate : Number

Example:

<video id='video' src='fireworks.ogv' width='150' height='100'></video><br>
<button onclick='video.paused ? video.play() : video.pause()'>Play/Pause</button>
<script>
  var video = document.getElementById('video');
  video.playbackRate = 0.25;
</script>

Run

Results:

played : TimeRanges readonly

Returns a list of ranges of the media that has been played.

Example:

<!-- Draws a bar below the video with the played ranges -->
<video id='video' src='fireworks.ogv' width='150' height='100'></video><br>
<canvas id='buffered' width='150' height='10'></canvas><br>
<button onclick='video.paused ? video.play() : video.pause()'>Play/Pause</button>
<script>
  var video = document.getElementById('video');
  video.addEventListener('timeupdate', function() {
    var canvas = document.getElementById('buffered');
    var context = canvas.getContext('2d');

    context.clearRect(0, 0, canvas.width, canvas.height);

    var ranges = video.played;

    for (var i = 0; i < ranges.length; i++) {
      var startPercent = ranges.start(i) / video.duration;
      var endPercent = ranges.end(i) / video.duration;

      context.fillRect(startPercent * canvas.width, 0,
                       (endPercent - startPercent) * canvas.width, canvas.height);
    }
  });
</script>

Run

Results:

preload : String

readyState : Number readonly

Returns one of HAVE_NOTHING, HAVE_METADATA, HAVE_CURRENT_DATA, HAVE_FUTURE_DATA, or HAVE_ENOUGH_DATA based on the amount of data downloaded for the media.

Spec

seekable : TimeRanges readonly

seeking : Boolean readonly

src : String

textTracks : TextTrackList readonly

videoTracks : VideoTrackList readonly

volume : Number

Instance Methods

addTextTrack(kind : String, [label : String, [language : String]]) : TextTrack

kind must be one of 'subtitles', 'captions', 'descriptions', 'chapters', or 'metadata'.

canPlayType(mimeType : String) : String

Returns one of '', 'maybe', or 'probably' depending on the ability of the browser to play the specified type of video.

fastSeek(time : Number) : undefined

getStartDate() : Date

load() : undefined

pause() : undefined

play() : undefined

Instance Events

onabort / 'abort' event

listener(event : Event) : undefined

oncanplay / 'canplay' event

listener(event : Event) : undefined

oncanplaythrough / 'canplaythrough' event

listener(event : Event) : undefined

ondurationchange / 'durationchange' event

listener(event : Event) : undefined

onemptied / 'emptied' event

listener(event : Event) : undefined

onemptied / 'emptied' event

listener(event : Event) : undefined

onended / 'ended' event

listener(event : Event) : undefined

onerror / 'error' event

listener(event : Event) : undefined

onloadeddata / 'loadeddata' event

listener(event : Event) : undefined

onloadedmetadata / 'loadedmetadata' event

listener(event : Event) : undefined

onloadstart / 'loadstart' event

listener(event : Event) : undefined

onpause / 'pause' event

listener(event : Event) : undefined

onplay / 'play' event

listener(event : Event) : undefined

onplaying / 'playing' event

listener(event : Event) : undefined

onprogress / 'progress' event

listener(event : Event) : undefined

onratechange / 'ratechange' event

listener(event : Event) : undefined

onseeked / 'seeked' event

listener(event : Event) : undefined

onseeking / 'seeking' event

listener(event : Event) : undefined

onsuspend / 'suspend' event

listener(event : Event) : undefined

ontimeupdate / 'timeupdate' event

listener(event : Event) : undefined

onvolumechange / 'volumechange' event

listener(event : Event) : undefined

onwaiting / 'waiting' event

listener(event : Event) : undefined

HTMLMediaElement Properties

HAVE_CURRENT_DATA : Number readonly value = 2

Returned by readyState when the the metadatad for the media has loaded and some of the data for the current position has loaded. Listen to the loadeddata event to know when the current data has loaded.

HAVE_ENOUGH_DATA : Number readonly value = 4

Returned by readyState when the the metadatad for the media has loaded and enough of the data for the current position has loaded so the media will play to the end without needing to pause for buffering. Listen to the canplaythrough event to know when enough data has loaded.

HAVE_FUTURE_DATA : Number readonly value = 3

Returned by readyState when the the metadatad for the media has loaded and enough of the data for the current position has loaded to start playing (but not necessarily enough to play to the end). Listen to the canplay event to know when the future data has loaded.

HAVE_METADATA : Number readonly value = 1

Returned by readyState when the metadata for the media has loaded but no data for the media has loaded yet. Listen to the loadedmetadata event to know when the metadata has loaded.

HAVE_NOTHING : Number readonly value = 0

Returned by readyState when no data for the media has loaded yet.

NETWORK_EMPTY : Number readonly value = 0

NETWORK_IDLE : Number readonly value = 1

NETWORK_LOADING : Number readonly value = 2

NETWORK_NO_SOURCE : Number readonly value = 3

home license contribute feedback