recursal/MDN huggingface dataset:
HTMLMediaElement: loadedmetadata event
======================================

The `loadedmetadata` event is fired when the metadata has been loaded.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


```js
addEventListener("loadedmetadata", (event) => {});

onloadedmetadata = (event) => {};
```

Event type
----------

A generic `Event`.

Examples
--------

These examples add an event listener for the HTMLMediaElement's `loadedmetadata` event, then post a message when that event handler has reacted to the event firing.

Using `addEventListener()`:


```js
const video = document.querySelector("video");

video.addEventListener("loadedmetadata", (event) => {
  console.log(
    "The duration and dimensions of the media and tracks are now known.",
  );
});
```


Using the `onloadedmetadata` event handler property:


```js
const video = document.querySelector("video");

video.onloadedmetadata = (event) => {
  console.log(
    "The duration and dimensions of the media and tracks are now known.",
  );
};
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # event-media-loadedmetadata |
| HTML Standard # handler-onloadedmetadata |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Related Events
--------------

* The HTMLMediaElement `playing` event
* The HTMLMediaElement `waiting` event
* The HTMLMediaElement `seeking` event
* The HTMLMediaElement `seeked` event
* The HTMLMediaElement `ended` event
* The HTMLMediaElement `loadedmetadata` event
* The HTMLMediaElement `loadeddata` event
* The HTMLMediaElement `canplay` event
* The HTMLMediaElement `canplaythrough` event
* The HTMLMediaElement `durationchange` event
* The HTMLMediaElement `timeupdate` event
* The HTMLMediaElement `play` event
* The HTMLMediaElement `pause` event
* The HTMLMediaElement `ratechange` event
* The HTMLMediaElement `volumechange` event
* The HTMLMediaElement `suspend` event
* The HTMLMediaElement `emptied` event
* The HTMLMediaElement `stalled` event
See also
--------

* `HTMLAudioElement`
* `HTMLVideoElement`
* `<audio>`
* `<video>`
HTMLMediaElement: paused property
=================================

 The read-only **`HTMLMediaElement.paused`** property
 tells whether the media element is paused.

Value
-----

 A boolean value. `true` is paused and `false` is not
 paused.

Examples
--------


```js
const obj = document.createElement("video");
console.log(obj.paused); // true
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-media-paused-dev |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `HTMLMediaElement`: Interface used to define the `HTMLMediaElement.paused` property
HTMLMediaElement: canplay event
===============================

The `canplay` event is 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.

This event is not cancelable and does not bubble.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


```js
addEventListener("canplay", (event) => {});

oncanplay = (event) => {};
```

Event type
----------

A generic `Event`.

Examples
--------

These examples add an event listener for the HTMLMediaElement's `canplay` event, then post a message when that event handler has reacted to the event firing.

Using `addEventListener()`:


```js
const video = document.querySelector("video");

video.addEventListener("canplay", (event) => {
  console.log("Video can start, but not sure it will play through.");
});
```


Using the `oncanplay` event handler property:


```js
const video = document.querySelector("video");

video.oncanplay = (event) => {
  console.log("Video can start, but not sure it will play through.");
};
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # event-media-canplay |
| HTML Standard # handler-oncanplay |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Related Events
--------------

* The HTMLMediaElement `playing` event
* The HTMLMediaElement `waiting` event
* The HTMLMediaElement `seeking` event
* The HTMLMediaElement `seeked` event
* The HTMLMediaElement `ended` event
* The HTMLMediaElement `loadedmetadata` event
* The HTMLMediaElement `loadeddata` event
* The HTMLMediaElement `canplay` event
* The HTMLMediaElement `canplaythrough` event
* The HTMLMediaElement `durationchange` event
* The HTMLMediaElement `timeupdate` event
* The HTMLMediaElement `play` event
* The HTMLMediaElement `pause` event
* The HTMLMediaElement `ratechange` event
* The HTMLMediaElement `volumechange` event
* The HTMLMediaElement `suspend` event
* The HTMLMediaElement `emptied` event
* The HTMLMediaElement `stalled` event
See also
--------

* `HTMLAudioElement`
* `HTMLVideoElement`
* `<audio>`
* `<video>`
HTMLMediaElement: sinkId property
=================================

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

The **`HTMLMediaElement.sinkId`** read-only property of the Audio Output Devices API returns a string that is the unique ID of the device to be used for playing audio output.

 This ID should be one of the `MediaDeviceInfo.deviceId` values returned from `MediaDevices.enumerateDevices()`, `id-multimedia`, or `id-communications`.
 If the user agent default device is being used, it returns an empty string.

Value
-----

A string indicating the current audio output device, or the empty string if the default user agent output device is being used.

Security requirements
---------------------

Access to the property is subject to the following constraints:

* The property must be called in a secure context.
Specifications
--------------

| Specification |
| --- |
| Audio Output Devices API # dom-htmlmediaelement-sinkid |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `MediaDevices.selectAudioOutput()`
* `HTMLMediaElement.setSinkId()`
HTMLMediaElement: controller property
=====================================

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The **`HTMLMediaElement.controller`** property represents the media controller assigned to the element.

Value
-----

A `MediaController` object or `null` if no media controller is assigned to the element. The default is `null`.

Specifications
--------------

In 2016, the whole Media Controller feature was removed from the HTML specification. It is no longer on track to become a standard.

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HTMLMediaElement: durationchange event
======================================

The `durationchange` event is fired when the `duration` attribute has been updated.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


```js
addEventListener("durationchange", (event) => {});

ondurationchange = (event) => {};
```

Event type
----------

A generic `Event`.

Examples
--------

These examples add an event listener for the HTMLMediaElement's `durationchange` event, then post a message when that event handler has reacted to the event firing.

Using `addEventListener()`:


```js
const video = document.querySelector("video");

video.addEventListener("durationchange", (event) => {
  console.log("Not sure why, but the duration of the video has changed.");
});
```


Using the `ondurationchange` event handler property:


```js
const video = document.querySelector("video");

video.ondurationchange = (event) => {
  console.log("Not sure why, but the duration of the video has changed.");
};
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # event-media-durationchange |
| HTML Standard # handler-ondurationchange |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Related Events
--------------

* The HTMLMediaElement `playing` event
* The HTMLMediaElement `waiting` event
* The HTMLMediaElement `seeking` event
* The HTMLMediaElement `seeked` event
* The HTMLMediaElement `ended` event
* The HTMLMediaElement `loadedmetadata` event
* The HTMLMediaElement `loadeddata` event
* The HTMLMediaElement `canplay` event
* The HTMLMediaElement `canplaythrough` event
* The HTMLMediaElement `durationchange` event
* The HTMLMediaElement `timeupdate` event
* The HTMLMediaElement `play` event
* The HTMLMediaElement `pause` event
* The HTMLMediaElement `ratechange` event
* The HTMLMediaElement `volumechange` event
* The HTMLMediaElement `suspend` event
* The HTMLMediaElement `emptied` event
* The HTMLMediaElement `stalled` event
See also
--------

* `HTMLAudioElement`
* `HTMLVideoElement`
* `<audio>`
* `<video>`
HTMLMediaElement: progress event
================================

The **`progress`** event is fired periodically as the browser loads a resource.

This event is not cancelable and does not bubble.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


```js
addEventListener("progress", (event) => {});

onprogress = (event) => {};
```

Event type
----------

A generic `Event`.

Examples
--------

### Live example

#### HTML


```html
<div class="example">
  <button type="button">Load video</button>
  <video controls width="250"></video>

  <div class="event-log">
    <label for="eventLog">Event log:</label>
    <textarea readonly class="event-log-contents" id="eventLog"></textarea>
  </div>
</div>
```


```
.event-log-contents {
  width: 18rem;
  height: 5rem;
  border: 1px solid black;
  margin: 0.2rem;
  padding: 0.2rem;
}

.example {
  display: grid;
  grid-template-areas:
    "button log"
    "video log";
}

button {
  grid-area: button;
  width: 10rem;
  margin: 0.5rem 0;
}

video {
  grid-area: video;
}

.event-log {
  grid-area: log;
}

.event-log > label {
  display: block;
}
```


#### JavaScript


```js
const loadVideo = document.querySelector("button");
const video = document.querySelector("video");
const eventLog = document.querySelector(".event-log-contents");
let source = null;

function handleEvent(event) {
  eventLog.textContent += `${event.type}\n`;
}

video.addEventListener("loadstart", handleEvent);
video.addEventListener("progress", handleEvent);
video.addEventListener("canplay", handleEvent);
video.addEventListener("canplaythrough", handleEvent);

loadVideo.addEventListener("click", () => {
  if (source) {
    document.location.reload();
  } else {
    loadVideo.textContent = "Reset example";
    source = document.createElement("source");
    source.setAttribute(
      "src",
      "https://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/rabbit320.mp4",
    );
    source.setAttribute("type", "video/mp4");

    video.appendChild(source);
  }
});
```


#### Result

Specifications
--------------

| Specification |
| --- |
| HTML Standard # event-media-progress |
| HTML Standard # handler-onprogress |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `HTMLAudioElement`
* `HTMLVideoElement`
* `<audio>`
* `<video>`
HTMLMediaElement: suspend event
===============================

The `suspend` event is fired when media data loading has been suspended.

This event is not cancelable and does not bubble.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


```js
addEventListener("suspend", (event) => {});

onsuspend = (event) => {};
```

Event type
----------

A generic `Event`.

Examples
--------

These examples add an event listener for the HTMLMediaElement's `suspend` event, then post a message when that event handler has reacted to the event firing.

Using `addEventListener()`:


```js
const video = document.querySelector("video");

video.addEventListener("suspend", (event) => {
  console.log("Data loading has been suspended.");
});
```


Using the `onsuspend` event handler property:


```js
const video = document.querySelector("video");

video.onsuspend = (event) => {
  console.log("Data loading has been suspended.");
};
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # event-media-suspend |
| HTML Standard # handler-onsuspend |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Related Events
--------------

* The HTMLMediaElement `playing` event
* The HTMLMediaElement `waiting` event
* The HTMLMediaElement `seeking` event
* The HTMLMediaElement `seeked` event
* The HTMLMediaElement `ended` event
* The HTMLMediaElement `loadedmetadata` event
* The HTMLMediaElement `loadeddata` event
* The HTMLMediaElement `canplay` event
* The HTMLMediaElement `canplaythrough` event
* The HTMLMediaElement `durationchange` event
* The HTMLMediaElement `timeupdate` event
* The HTMLMediaElement `play` event
* The HTMLMediaElement `pause` event
* The HTMLMediaElement `ratechange` event
* The HTMLMediaElement `volumechange` event
* The HTMLMediaElement `suspend` event
* The HTMLMediaElement `emptied` event
* The HTMLMediaElement `stalled` event
See also
--------

* `HTMLAudioElement`
* `HTMLVideoElement`
* `<audio>`
* `<video>`
* Web Audio API
HTMLMediaElement: mediaKeys property
====================================

The read-only **`HTMLMediaElement.mediaKeys`** property returns a `MediaKeys` object, that is a set of keys that the element can use for decryption of media data during playback.

Value
-----

A `MediaKeys` object, or `null` if no key is available.

Specifications
--------------

| Specification |
| --- |
| Encrypted Media Extensions # dom-htmlmediaelement-mediakeys |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `MediaKeys`
HTMLMediaElement: readyState property
=====================================

 The **`HTMLMediaElement.readyState`** property indicates the
 readiness state of the media.

Value
-----

An `unsigned short`. Possible values are:

| 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.
  |

Examples
--------

 This example will listen for audio data to be loaded for the element `example`. It will
 then check if at least the current playback position has been loaded. If it has, the
 audio will play.


```html
<audio id="example" preload="auto">
  <source src="sound.ogg" type="audio/ogg" />
</audio>
```



```js
const obj = document.getElementById("example");

obj.addEventListener("loadeddata", () => {
  if (obj.readyState >= 2) {
    obj.play();
  }
});
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-media-readystate-dev |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `HTMLMediaElement`: Interface used to define the `HTMLMediaElement.readyState` property
HTMLMediaElement: error event
=============================

The **`error`** event is fired when the resource could not be loaded due to an error (for example, a network connectivity problem).

This event is not cancelable and does not bubble.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


```js
addEventListener("error", (event) => {});

onerror = (event) => {};
```

Event type
----------

A generic `Event`.

Examples
--------


```js
const video = document.querySelector("video");
const videoSrc = "https://path/to/video.webm";

video.addEventListener("error", () => {
  console.error(`Error loading: ${videoSrc}`);
});

video.setAttribute("src", videoSrc);
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # event-media-error |
| HTML Standard # handler-window-onmessageerror |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `HTMLAudioElement`
* `HTMLVideoElement`
* `<audio>`
* `<video>`
HTMLMediaElement: waiting event
===============================

The `waiting` event is fired when playback has stopped because of a temporary lack of data.

This event is not cancelable and does not bubble.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


```js
addEventListener("waiting", (event) => {});

onwaiting = (event) => {};
```

Event type
----------

A generic `Event`.

Examples
--------

These examples add an event listener for the HTMLMediaElement's `waiting` event, then post a message when that event handler has reacted to the event firing.

Using `addEventListener()`:


```js
const video = document.querySelector("video");

video.addEventListener("waiting", (event) => {
  console.log("Video is waiting for more data.");
});
```


Using the `onwaiting` event handler property:


```js
const video = document.querySelector("video");

video.onwaiting = (event) => {
  console.log("Video is waiting for more data.");
};
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # event-media-waiting |
| HTML Standard # handler-onwaiting |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Related Events
--------------

* The HTMLMediaElement `playing` event
* The HTMLMediaElement `waiting` event
* The HTMLMediaElement `seeking` event
* The HTMLMediaElement `seeked` event
* The HTMLMediaElement `ended` event
* The HTMLMediaElement `loadedmetadata` event
* The HTMLMediaElement `loadeddata` event
* The HTMLMediaElement `canplay` event
* The HTMLMediaElement `canplaythrough` event
* The HTMLMediaElement `durationchange` event
* The HTMLMediaElement `timeupdate` event
* The HTMLMediaElement `play` event
* The HTMLMediaElement `pause` event
* The HTMLMediaElement `ratechange` event
* The HTMLMediaElement `volumechange` event
* The HTMLMediaElement `suspend` event
* The HTMLMediaElement `emptied` event
* The HTMLMediaElement `stalled` event
See also
--------

* `HTMLAudioElement`
* `HTMLVideoElement`
* `<audio>`
* `<video>`
HTMLMediaElement: src property
==============================

 The **`HTMLMediaElement.src`** property reflects the value of
 the HTML media element's `src` attribute, which indicates the URL of a media
 resource to use in the element.


**Note:** The best way to know the URL of the media resource currently
 in active use in this element is to look at the value of the
 `currentSrc` attribute, which also takes
 into account selection of a best or preferred media resource from a list provided in
 an `HTMLSourceElement` (which represents a `<source>`
 element).


Value
-----

 A string object containing the URL of a media resource to use in the
 element; this property reflects the value of the HTML element's `src`
 attribute.

Examples
--------


```js
const obj = document.createElement("video");
console.log(obj.src); // ""
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-media-src |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `HTMLMediaElement`: Interface used to define the `HTMLMediaElement.src` property
HTMLMediaElement: autoplay property
===================================

 The **`HTMLMediaElement.autoplay`**
 property reflects the `autoplay` HTML attribute, indicating
 whether playback should automatically begin as soon as enough media is available to do
 so without interruption.

 A media element whose source is a `MediaStream` and whose
 `autoplay` property is `true` will begin playback when it becomes
 active (that is, when `MediaStream.active` becomes `true`).


**Note:** Sites which automatically play audio (or videos with an audio
 track) can be an unpleasant experience for users, so it should be avoided when
 possible. If you must offer autoplay functionality, you should make it opt-in
 (requiring a user to specifically enable it). However, autoplay can be useful when
 creating media elements whose source will be set at a later time, under user control.


 For a much more in-depth look at autoplay, autoplay blocking, and how to respond when
 autoplay is blocked by the user's browser, see our article Autoplay guide for media and Web Audio APIs.

Value
-----

 A boolean value which is `true` if the media element will
 begin playback as soon as enough content has loaded to allow it to do so without
 interruption.


**Note:** Some browsers offer users the ability to override
 `autoplay` in order to prevent disruptive audio or video from playing
 without permission or in the background. Do not rely on `autoplay` actually
 starting playback and instead use `play`
 event.


Examples
--------


```html
<video id="video" controls>
  <source
 src="https://player.vimeo.com/external/250688977.sd.mp4?s=d14b1f1a971dde13c79d6e436b88a6a928dfe26b&profile\_id=165" />
</video>
```



```js
// Disable autoplay (recommended)
// false is the default value
document.querySelector("#video").autoplay = false;
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-media-autoplay |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `HTMLMediaElement`: Interface used to define the `HTMLMediaElement.autoplay` property
* `<audio>`, `<video>`