HTMLMediaElement

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

* Some parts of this feature may have varying levels of support.

TheHTMLMediaElement interface adds toHTMLElement the properties and methods needed to support basic media-related capabilities that are common to audio and video.

TheHTMLVideoElement andHTMLAudioElement elements both inherit this interface.

Instance properties

This interface also inherits properties from its ancestorsHTMLElement,Element,Node, andEventTarget.

HTMLMediaElement.audioTracksRead only: AnAudioTrackList that lists theAudioTrack objects contained in the element.
HTMLMediaElement.autoplay: A boolean value that reflects theautoplay 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 theAutoplay 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.bufferedRead only: Returns aTimeRanges object that indicates the ranges of the media source that the browser has buffered (if any) at the moment thebuffered property is accessed.
HTMLMediaElement.controls: A boolean that reflects thecontrols HTML attribute, indicating whether user interface items for controlling the resource should be displayed.
HTMLMediaElement.controlsList: Returns aDOMTokenList that helps the user agent select what controls to show on the media element whenever the user agent shows its own set of controls. TheDOMTokenList takes one or more of three possible values:nodownload,nofullscreen, andnoremoteplayback.
HTMLMediaElement.crossOrigin: A string indicating theCORS setting for this media element.
HTMLMediaElement.currentSrcRead only: Returns a string 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 themuted HTML attribute, which indicates whether the media element's audio output should be muted by default.
HTMLMediaElement.defaultPlaybackRate: Adouble 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.durationRead 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 isNaN. If the media is of indefinite length (such as streamed live media, a WebRTC call's media, or similar), the value isInfinity.
HTMLMediaElement.endedRead only: Returns a boolean that indicates whether the media element has finished playing.
HTMLMediaElement.errorRead only: Returns aMediaError object for the most recent error, ornull if there has not been an error.
HTMLMediaElement.loop: A boolean that reflects theloop HTML attribute, which indicates whether the media element should start over when it reaches the end.
HTMLMediaElement.mediaKeysRead onlySecure context: Returns aMediaKeys object, that is a set of keys that the element can use for decryption of media data during playback. If no key is available, it can benull.
HTMLMediaElement.muted: A boolean that determines whether audio is muted.true if the audio is muted andfalse otherwise.
HTMLMediaElement.networkStateRead only: Returns aunsigned short (enumeration) indicating the current state of fetching the media over the network.
HTMLMediaElement.pausedRead only: Returns a boolean that indicates whether the media element is paused.
HTMLMediaElement.playbackRate: Adouble that indicates the rate at which the media is being played back.
HTMLMediaElement.playedRead only: Returns aTimeRanges object that contains the ranges of the media source that the browser has played, if any.
HTMLMediaElement.preload: A string that reflects thepreload HTML attribute, indicating what data should be preloaded, if any. Possible values are:none,metadata,auto.
HTMLMediaElement.preservesPitch: A boolean value that determines if the pitch of the sound will be preserved. If set tofalse, the pitch will adjust to the speed of the audio.
HTMLMediaElement.readyStateRead only: Returns aunsigned short (enumeration) indicating the readiness state of the media.
HTMLMediaElement.remoteRead only: Return aRemotePlayback object instance associated with the media element.
HTMLMediaElement.seekableRead only: Returns aTimeRanges object that contains the time ranges that the user is able to seek to, if any.
HTMLMediaElement.seekingRead only: Returns a boolean that indicates whether the media is in the process of seeking to a new position.
HTMLMediaElement.sinkIdRead onlySecure context: Returns a string that is the unique ID of the audio device delivering output, or an empty string if the user agent default audio device is being used.
HTMLMediaElement.src: A string that reflects thesrc HTML attribute, which contains the URL of a media resource to use.
HTMLMediaElement.srcObject: An object which serves as the source of the media associated with theHTMLMediaElement, ornull if not assigned.
HTMLMediaElement.textTracksRead only: Returns aTextTrackList object containing the list ofTextTrack objects contained in the element.
HTMLMediaElement.videoTracksRead only: Returns aVideoTrackList object containing the list ofVideoTrack objects contained in the element.
HTMLMediaElement.volume: Adouble indicating the audio volume, from 0.0 (silent) to 1.0 (loudest).

Obsolete properties

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

HTMLMediaElement.controllerDeprecated Non-standard: A MediaController object that represents the media controller assigned to the element, ornull if none is assigned.
HTMLMediaElement.mediaGroupDeprecated Non-standard: A string that reflects themediagroup HTML attribute, which indicates the name of the group of elements it belongs to. A group of media elements shares a common MediaController.
HTMLMediaElement.mozAudioCapturedRead onlyNon-standard Deprecated: Returns a boolean. Related to audio stream capture.
HTMLMediaElement.mozFragmentEndNon-standard Deprecated: Adouble that provides access to the fragment end time if the media element has a fragment URI forcurrentSrc, otherwise it is equal to the media duration.

Instance methods

This interface also inherits methods from its ancestorsHTMLElement,Element,Node, andEventTarget.

HTMLMediaElement.addTextTrack(): Adds a newTextTrack object (such as a track for subtitles) to a media element. This is a programmatic interface only and does not affect the DOM.
HTMLMediaElement.captureStream(): ReturnsMediaStream, captures a stream of the media content.
HTMLMediaElement.canPlayType(): Given a string specifying a MIME media type (potentially with thecodecs parameter included),canPlayType() returns the stringprobably 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(): Quickly seeks to the given time with low precision.
HTMLMediaElement.load(): Resets the media to the beginning and selects the best available source from the sources provided using thesrc attribute or the<source> element.
HTMLMediaElement.pause(): Pauses the media playback.
HTMLMediaElement.play(): Begins playback of the media.
HTMLMediaElement.seekToNextFrame()Deprecated Non-standard: 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()Secure context: ReturnsPromise. Sets theMediaKeys keys to use when decrypting media during playback.
HTMLMediaElement.setSinkId()Secure context: Sets the ID of the audio device to use for output and returns aPromise. 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()Non-standard: The Firefox-prefixed equivalent of HTMLMediaElement.captureStream(). See itsbrowser compatibility for details.
HTMLMediaElement.mozCaptureStreamUntilEnded()Non-standard Deprecated: [enter description]
HTMLMediaElement.mozGetMetadata()Non-standard Deprecated: 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 theloadedmetadata event fires.

Events

Inherits events from its parent,HTMLElement.

Listen to these events usingaddEventListener() or by assigning an event listener to theoneventname 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 thatnot 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 property has been updated.
emptied: Fired when the media has become empty; for example, when the media has already been loaded (or partially loaded), and theHTMLMediaElement.load() method is called to reload it.
encrypted: Fired when initialization data is found in the media that indicates the media is encrypted.
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'sHTMLMediaElement.pause() method is called.
play: Fired when thepaused property is changed fromtrue tofalse, as a result of theHTMLMediaElement.play() method, or theautoplay 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 thecurrentTime property has been updated.
volumechange: Fired when the volume has changed.
waiting: Fired when playback has stopped because of a temporary lack of data.
waitingforkey: Fired when playback is first blocked while waiting for a key.