HTML Audio & Video
HTML DOM Audio/Video Complete Reference
This complete reference lists the properties, methods and events shared by the HTML <audio> and <video> elements. Both elements implement the HTMLMediaElement interface, so almost every member below works identically for sound and for video; the <video> element simply adds a few extra members such as videoWidth, videoHeight, width and height.
Overview
You access these members on any media element you obtain with document.getElementById(), create with new Audio(), or build with document.createElement("video"). Properties get or set state, methods perform actions, and events let you react to changes during loading and playback.
Properties
| Name | Description |
|---|---|
| audioTracks | Returns an AudioTrackList of the available audio tracks |
| autoplay | Gets/sets whether playback starts as soon as the media is ready |
| buffered | Returns a TimeRanges object of the buffered (downloaded) portions |
| controller | Returns the MediaController that groups this element (if any) |
| controls | Gets/sets whether the browser's default controls are shown |
| crossOrigin | Gets/sets the CORS settings for the media resource |
| currentSrc | Returns the absolute URL of the currently selected media source |
| currentTime | Gets/sets the current playback position in seconds |
| defaultMuted | Gets/sets the default (attribute) muted state |
| defaultPlaybackRate | Gets/sets the default playback speed |
| duration | Returns the total length of the media in seconds |
| ended | Returns whether playback has reached the end |
| error | Returns a MediaError object for the most recent error, or null |
| loop | Gets/sets whether the media restarts when it ends |
| mediaGroup | Gets/sets the name of the media group the element belongs to |
| muted | Gets/sets whether sound is currently muted |
| networkState | Returns the current network state of the element |
| paused | Returns whether the media is currently paused |
| playbackRate | Gets/sets the current playback speed (1.0 = normal) |
| played | Returns a TimeRanges object of the portions that have been played |
| preload | Gets/sets a hint for how much media to preload (none/metadata/auto) |
| readyState | Returns the current readiness state of the media |
| seekable | Returns a TimeRanges object of the seekable portions |
| seeking | Returns whether the browser is currently seeking |
| src | Gets/sets the URL of the media resource |
| textTracks | Returns a TextTrackList of the available text tracks (captions) |
| videoTracks | Returns a VideoTrackList of the available video tracks |
| volume | Gets/sets the audio volume, from 0.0 to 1.0 |
| videoWidth | (video only) Returns the intrinsic width of the video in pixels |
| videoHeight | (video only) Returns the intrinsic height of the video in pixels |
| width | (video only) Gets/sets the displayed width of the element |
| height | (video only) Gets/sets the displayed height of the element |
| poster | (video only) Gets/sets the poster image shown before playback |
Methods
| Name | Description |
|---|---|
| addTextTrack() | Adds a new text track (for captions or subtitles) to the media |
| canPlayType() | Reports whether the browser can likely play a given media type |
| fastSeek() | Seeks quickly to a time, trading precision for speed |
| load() | Re-loads the media element and resets it to its initial state |
| pause() | Pauses playback of the media |
| play() | Starts or resumes playback and returns a Promise |
Events
| Name | Description |
|---|---|
| abort | Fires when loading of the media is aborted |
| canplay | Fires when the browser can start playing the media |
| canplaythrough | Fires when the browser can play through without buffering |
| durationchange | Fires when the duration of the media changes |
| emptied | Fires when the media has become empty (e.g. after load errors) |
| ended | Fires when playback reaches the end of the media |
| error | Fires when an error occurs while loading the media |
| loadeddata | Fires when the first frame of the media has loaded |
| loadedmetadata | Fires when duration and dimensions metadata have loaded |
| loadstart | Fires when the browser starts looking for the media |
| pause | Fires when playback is paused |
| play | Fires when playback starts or resumes |
| playing | Fires when playback is ready to start after buffering |
| progress | Fires periodically as the browser downloads the media |
| ratechange | Fires when the playback speed changes |
| seeked | Fires when a seek operation completes |
| seeking | Fires when a seek operation begins |
| stalled | Fires when the browser is trying to fetch data but none arrives |
| suspend | Fires when media data loading has been suspended |
| timeupdate | Fires when the current playback position changes |
| volumechange | Fires when the volume or muted state changes |
| waiting | Fires when playback pauses to buffer more data |
ℹ️
Members marked "(video only)" belong to HTMLVideoElement. All other rows are inherited from HTMLMediaElement and work on both <audio> and <video> elements.