HTMLMediaElement

The HTMLMediaElement interface adds to HTMLElement the properties and methods needed to support basic media-related capabilities that are common to audio and video. The HTMLVideoElement and HTMLAudioElement elements both inherit this interface.

Properties

This interface also inherits properties from its ancestors HTMLElement, Element, Node, and EventTarget.

HTMLMediaElement.audioTracks
A AudioTrackList that lists the AudioTrack objects contained in the element.
HTMLMediaElement.autoplay

A Boolean that reflects the autoplay HTML attribute, indicating whether playback should automatically begin as soon as enough media is available to do so without interruption.

Note: Automatically playing audio when the user doesn't expect or desire it is a poor user experience and should be avoided in most cases, though there are exceptions. See the Autoplay guide for media and Web Audio APIs for more information. Keep in mind that browsers may ignore autoplay requests, so you should ensure that your code isn't dependent on autoplay working.
HTMLMediaElement.buffered Read only
Returns a TimeRanges object that indicates the ranges of the media source that the browser has buffered (if any) at the moment the buffered property is accessed.
HTMLMediaElement.controller
Is a MediaController object that represents the media controller assigned to the element, or null if none is assigned.
HTMLMediaElement.controls
Is a Boolean that reflects the controls HTML attribute, indicating whether user interface items for controlling the resource should be displayed.
HTMLMediaElement.controlsList Read only
Returns a DOMTokenList that helps the user agent select what controls to show on the media element whenever the user agent shows its own set of controls. The DOMTokenList takes one or more of three possible values: nodownload, nofullscreen, and noremoteplayback.
HTMLMediaElement.crossOrigin
A DOMString indicating the CORS setting for this media element.
HTMLMediaElement.currentSrc Read only
Returns a DOMString with the absolute URL of the chosen media resource.
HTMLMediaElement.currentTime
A double-precision floating-point value indicating the current playback time in seconds; if the media has not started to play and has not been seeked, this value is the media's initial playback time. Setting this value seeks the media to the new time. The time is specified relative to the media's timeline.
HTMLMediaElement.defaultMuted
A Boolean that reflects the muted HTML attribute, which indicates whether the media element's audio output should be muted by default.
HTMLMediaElement.defaultPlaybackRate
A double indicating the default playback rate for the media.
HTMLMediaElement.disableRemotePlayback
A Boolean that sets or returns the remote playback state, indicating whether the media element is allowed to have a remote playback UI.
HTMLMediaElement.duration Read only
A read-only double-precision floating-point value indicating the total duration of the media in seconds. If no media data is available, the returned value is NaN. If the media is of indefinite length (such as streamed live media, a WebRTC call's media, or similar), the value is +Infinity.
HTMLMediaElement.ended Read only
Returns a Boolean that indicates whether the media element has finished playing.
HTMLMediaElement.error Read only
Returns a MediaError object for the most recent error, or null if there has not been an error.
HTMLMediaElement.loop
A Boolean that reflects the loop HTML attribute, which indicates whether the media element should start over when it reaches the end.
HTMLMediaElement.mediaGroup
A DOMString that reflects the mediagroup HTML attribute, which indicates the name of the group of elements it belongs to. A group of media elements shares a common MediaController.
HTMLMediaElement.mediaKeys Read only This is an experimental API that should not be used in production code.
Returns a MediaKeys object or null. MediaKeys is a set of keys that an associated HTMLMediaElement can use for decryption of media data during playback.
HTMLMediaElement.muted
Is a Boolean that determines whether audio is muted. true if the audio is muted and false otherwise.
HTMLMediaElement.networkState Read only
Returns a unsigned short (enumeration) indicating the current state of fetching the media over the network.
HTMLMediaElement.paused Read only
Returns a Boolean that indicates whether the media element is paused.
HTMLMediaElement.playbackRate
Is a double that indicates the rate at which the media is being played back.
HTMLMediaElement.played Read only
Returns a TimeRanges object that contains the ranges of the media source that the browser has played, if any.
HTMLMediaElement.preload
Is a DOMString that reflects the preload HTML attribute, indicating what data should be preloaded, if any. Possible values are: none, metadata, auto.
HTMLMediaElement.preservesPitch This API has not been standardized.
Is a Boolean that determines if the pitch of the sound will be preserved. If set to false, the pitch will adjust to the speed of the audio. This is implemented with prefixes in Firefox (mozPreservesPitch) and WebKit (webkitPreservesPitch).
HTMLMediaElement.readyState Read only
Returns a unsigned short (enumeration) indicating the readiness state of the media.
HTMLMediaElement.seekable Read only
Returns a TimeRanges object that contains the time ranges that the user is able to seek to, if any.
HTMLMediaElement.seeking Read only
Returns a Boolean that indicates whether the media is in the process of seeking to a new position.
HTMLMediaElement.sinkId Read only This is an experimental API that should not be used in production code.
Returns a DOMString that is the unique ID of the audio device delivering output, or an empty string if it is using the user agent default. This ID should be one of the MediaDeviceInfo.deviceid values returned from MediaDevices.enumerateDevices(), id-multimedia, or id-communications.
HTMLMediaElement.src
Is a DOMString that reflects the src HTML attribute, which contains the URL of a media resource to use.
HTMLMediaElement.srcObject
Is a MediaStream representing the media to play or that has played in the current HTMLMediaElement, or null if not assigned.
HTMLMediaElement.textTracks Read only
Returns the list of TextTrack objects contained in the element.
HTMLMediaElement.videoTracks Read only
Returns the list of VideoTrack objects contained in the element.
HTMLMediaElement.volume
Is a double indicating the audio volume, from 0.0 (silent) to 1.0 (loudest).

Event handlers

HTMLMediaElement.onencrypted
Sets the EventHandler called when the media is encrypted.
HTMLMediaElement.onwaitingforkey
Sets the EventHandler called when playback is blocked while waiting for an encryption key.

Obsolete attributes

These attributes are obsolete and should not be used, even if a browser still supports them.

HTMLMediaElement.initialTime Read only This API has not been standardized. This is an obsolete API and is no longer guaranteed to work.
Returns a double that indicates the initial playback position in seconds.
HTMLMediaElement.mozAudioCaptured Read only This API has not been standardized.
Returns a Boolean. Related to audio stream capture.
HTMLMediaElement.mozChannels Read only This API has not been standardized. This deprecated API should no longer be used, but will probably still work.
Returns a double representing the number of channels in the audio resource (e.g., 2 for stereo).
HTMLMediaElement.mozFragmentEnd This API has not been standardized.
Is a double that provides access to the fragment end time if the media element has a fragment URI for currentSrc, otherwise it is equal to the media duration.
HTMLMediaElement.mozFrameBufferLength This API has not been standardized. This deprecated API should no longer be used, but will probably still work.

Is a unsigned long that 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, 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.

HTMLMediaElement.mozSampleRate Read only This API has not been standardized. This deprecated API should no longer be used, but will probably still work.
Returns a double representing the number of samples per second that will be played. For example, 44100 samples per second is the sample rate used by CD audio.

Obsolete event handlers

HTMLMediaElement.onmozinterruptbegin This API has not been standardized. This is an obsolete API and is no longer guaranteed to work.
Sets the EventHandler called when the media element is interrupted because of the Audio Channel manager. This was Firefox-specific, having been implemented for Firefox OS, and was removed in Firefox 55.
HTMLMediaElement.onmozinterruptend This API has not been standardized. This is an obsolete API and is no longer guaranteed to work.
Sets the EventHandler called when the interruption is concluded. This was Firefox-specific, having been implemented for Firefox OS, and was removed in Firefox 55.

Methods

This interface also inherits methods from its ancestors HTMLElement, Element, Node, and EventTarget.

HTMLMediaElement.addTextTrack()
Adds a text track (such as a track for subtitles) to a media element.
HTMLMediaElement.captureStream() This is an experimental API that should not be used in production code.
Returns MediaStream, captures a stream of the media content.
HTMLMediaElement.canPlayType()
Given a string specifying a MIME media type (potentially with the codecs parameter included), canPlayType() returns the string probably if the media should be playable, maybe if there's not enough information to determine whether the media will play or not, or an empty string if the media cannot be played.
HTMLMediaElement.fastSeek()
Directly seeks to the given time.
HTMLMediaElement.load()
Resets the media to the beginning and selects the best available source from the sources provided using the src attribute or the <source> element.
HTMLMediaElement.pause()
Pauses the media playback.
HTMLMediaElement.play()
Begins playback of the media.
HTMLMediaElement.seekToNextFrame() This API has not been standardized. This is an experimental API that should not be used in production code.
Seeks to the next frame in the media. This non-standard, experimental method makes it possible to manually drive reading and rendering of media at a custom speed, or to move through the media frame-by-frame to perform filtering or other operations.
HTMLMediaElement.setMediaKeys() This is an experimental API that should not be used in production code.
Returns Promise. Sets the MediaKeys keys to use when decrypting media during playback.
HTMLMediaElement.setSinkId() This is an experimental API that should not be used in production code.
Sets the ID of the audio device to use for output and returns a Promise. This only works when the application is authorized to use the specified device.

Obsolete methods

These methods are obsolete and should not be used, even if a browser still supports them.

HTMLMediaElement.mozCaptureStream() This API has not been standardized.
[enter description]
HTMLMediaElement.mozCaptureStreamUntilEnded() This API has not been standardized.
[enter description]
HTMLMediaElement.mozGetMetadata() This API has not been standardized.
Returns Object, which contains properties that 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.
HTMLMediaElement.mozLoadFrom() This API has not been standardized. This deprecated API should no longer be used, but will probably still work.
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 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 data downloaded by either element is available to both.

Events

Inherits methods from its parent, HTMLElement , defined in the GlobalEventHandlers mixin. Listen to these events using addEventListener() or by assigning an event listener to the oneventname property of this interface.

abort
Fired when the resource was not fully loaded, but not as the result of an error.
canplay
Fired when the user agent can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content
canplaythrough
Fired when the user agent can play the media, and estimates that enough data has been loaded to play the media up to its end without having to stop for further buffering of content.
durationchange
Fired when the duration attribute has been updated.
emptied
Fired when the media has become empty; for example, when the media has already been loaded (or partially loaded), and the HTMLMediaElement.load() method is called to reload it.
ended
Fired when playback stops when end of the media (<audio> or <video>) is reached or because no further data is available.
error
Fired when the resource could not be loaded due to an error.
loadeddata
Fired when the first frame of the media has finished loading.
loadedmetadata
Fired when the metadata has been loaded
loadstart
Fired when the browser has started to load a resource.
pause
Fired when a request to pause play is handled and the activity has entered its paused state, most commonly occurring when the media's HTMLMediaElement.pause() method is called.
play
Fired when the paused property is changed from true to false, as a result of the HTMLMediaElement.play() method, or the autoplay attribute
playing
Fired when playback is ready to start after having been paused or delayed due to lack of data
progress
Fired periodically as the browser loads a resource.
ratechange
Fired when the playback rate has changed.
seeked
Fired when a seek operation completes
seeking
Fired when a seek operation begins
stalled
Fired when the user agent is trying to fetch media data, but data is unexpectedly not forthcoming.
suspend
Fired when the media data loading has been suspended.
timeupdate
Fired when the time indicated by the currentTime attribute has been updated.
volumechange
Fired when the volume has changed.
waiting
Fired when playback has stopped because of a temporary lack of data.

Specifications

Browser compatibility

BCD tables only load in the browser

See also

References

Guides