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

The **`loadstart`** event is fired when the browser has started to load a resource.

Syntax
------

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


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

onloadstart = (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://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm",
    );
    source.setAttribute("type", "video/webm");

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


#### Result

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

| Specification |
| --- |
| HTML Standard # event-media-loadstart |
| HTML Standard # handler-onloadstart |

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

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

See also
--------

* `HTMLAudioElement`
* `HTMLVideoElement`
* `<audio>`
* `<video>`
HTMLMediaElement: setMediaKeys() method
=======================================

 The **`setMediaKeys()`** method of the
 `HTMLMediaElement` interface returns a `Promise` that resolves
 to the passed `MediaKeys`, which are those used to decrypt media during
 playback.

Syntax
------


```js
setMediaKeys(mediaKeys)
```

### Parameters

`mediaKeys`

 A reference to a `MediaKeys` object that the
 `HTMLMediaElement` can use for decryption of media data during playback.


### Return value

A `Promise` that resolves to the passed instance of `MediaKeys`.

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

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

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

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

The `volumechange` event is fired when either the `volume` attribute or the `muted` attribute has changed.

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("volumechange", (event) => {});

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

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

A generic `Event`.

Examples
--------

These examples add an event listener for the HTMLMediaElement's `volumechange` 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("volumechange", (event) => {
  console.log("The volume changed.");
});
```


Using the `onvolumechange` event handler property:


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

video.onvolumechange = (event) => {
  console.log("The volume changed.");
};
```

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

| Specification |
| --- |
| HTML Standard # event-media-volumechange |
| HTML Standard # handler-onvolumechange |

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: error property
================================

 The **`HTMLMediaElement.error`** property is the
 `MediaError` object for the most recent error, or `null` if
 there has not been an error. When an `error` event is received by the
 element, you can determine details about what happened by examining this object.

Value
-----

 A `MediaError` object describing the most recent error to occur on the
 media element or `null` if no errors have occurred.

Examples
--------

 This example establishes a video element and adds an error handler to it; the error
 handler logs the details to console.


```js
const videoElement = document.createElement("video");
videoElement.onerror = () => {
  console.error(
    `Error ${videoElement.error.code}; details: ${videoElement.error.message}`,
  );
};
videoElement.src = "https://example.com/bogusvideo.mp4";
```

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

| Specification |
| --- |
| HTML Standard # dom-media-error-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.error` property
* `<audio>` and `<video>`
HTMLMediaElement: loadeddata event
==================================

The **`loadeddata`** event is fired when the frame at the current playback position of the media has finished loading; often the first frame.

**Note:** This event will not fire in mobile/tablet devices if data-saver is on in browser settings.

Syntax
------

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


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

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

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

A generic `Event`.

Examples
--------

These examples add an event listener for the HTMLMediaElement's `loadeddata` 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("loadeddata", (event) => {
  console.log(
    "Yay! The readyState just increased to " +
      "HAVE\_CURRENT\_DATA or greater for the first time.",
  );
});
```


Using the `onloadeddata` event handler property:


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

video.onloadeddata = (event) => {
  console.log(
    "Yay! The readyState just increased to " +
      "HAVE\_CURRENT\_DATA or greater for the first time.",
  );
};
```

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

| Specification |
| --- |
| HTML Standard # event-media-loadeddata |
| HTML Standard # handler-onloadeddata |

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: duration property
===================================

 The *read-only* `HTMLMediaElement`
 property **`duration`** indicates the length of the element's
 media in seconds.

Value
-----

 A double-precision floating-point value indicating the duration of the media in
 seconds. If no media data is available, the value `NaN` is returned. If the
 element's media doesn't have a known duration—such as for live media streams—the value
 of `duration` is `+Infinity`.

Examples
--------


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

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

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

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

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

See also
--------

* Web media technologies
* `HTMLMediaElement.currentTime`: The current playback position of the
 media
* The `<audio>` and `<video>` elements
HTMLMediaElement: canplaythrough event
======================================

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

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("canplaythrough", (event) => {});

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

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

A generic `Event`.

Examples
--------

These examples add an event listener for the HTMLMediaElement's `canplaythrough` 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("canplaythrough", (event) => {
  console.log(
    "I think I can play through the entire video without having to stop to buffer.",
  );
});
```


Using the `oncanplaythrough` event handler property:


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

video.oncanplaythrough = (event) => {
  console.log(
    "I think I can play through the entire video without having to stop to buffer.",
  );
};
```

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

| Specification |
| --- |
| HTML Standard # event-media-canplaythrough |
| HTML Standard # handler-oncanplaythrough |

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: play event
============================

The `play` event is fired when the `paused` property is changed from `true` to `false`, as a result of the `play` method, or the `autoplay` attribute.

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("play", (event) => {});

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

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

A generic `Event`.

Examples
--------

These examples add an event listener for the HTMLMediaElement's `play` 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("play", (event) => {
  console.log(
    "The Boolean paused property is now 'false'. Either the play() method was called or the autoplay attribute was toggled.",
  );
});
```


Using the `onplay` event handler property:


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

video.onplay = (event) => {
  console.log(
    "The Boolean paused property is now 'false'. Either the play() method was called or the autoplay attribute was toggled.",
  );
};
```

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

| Specification |
| --- |
| HTML Standard # event-media-play |
| HTML Standard # handler-onplay |

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: ratechange event
==================================

The `ratechange` event is fired when the playback rate has changed.

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("ratechange", (event) => {});

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

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

A generic `Event`.

Examples
--------

These examples add an event listener for the HTMLMediaElement's `ratechange` 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("ratechange", (event) => {
  console.log("The playback rate changed.");
});
```


Using the `onratechange` event handler property:


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

video.onratechange = (event) => {
  console.log("The playback rate changed.");
};
```

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

| Specification |
| --- |
| HTML Standard # event-media-ratechange |
| HTML Standard # handler-onratechange |

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: seeked event
==============================

The `seeked` event is fired when a seek operation completed, the current playback position has changed, and the Boolean `seeking` attribute is changed to `false`.

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("seeked", (event) => {});

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

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

A generic `Event`.

Examples
--------

These examples add an event listener for the HTMLMediaElement's `seeked` 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("seeked", (event) => {
  console.log("Video found the playback position it was looking for.");
});
```


Using the `onseeked` event handler property:


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

video.onseeked = (event) => {
  console.log("Video found the playback position it was looking for.");
};
```

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

| Specification |
| --- |
| HTML Standard # event-media-seeked |
| HTML Standard # handler-onseeked |

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: networkState property
=======================================

 The
 **`HTMLMediaElement.networkState`** property indicates the
 current state of the fetching of media over the network.

Value
-----

An `unsigned short`. Possible values are:

| Constant | Value | Description |
| --- | --- | --- |
| `NETWORK_EMPTY` | 0 | There is no data yet. Also, `readyState` is `HAVE_NOTHING`. |
| `NETWORK_IDLE` | 1 | HTMLMediaElement is active and has selected a resource, but is not using the network. |
| `NETWORK_LOADING` | 2 | The browser is downloading HTMLMediaElement data. |
| `NETWORK_NO_SOURCE` | 3 | No HTMLMediaElement src found. |

Examples
--------

 This example will listen for the audio element to begin playing and then check if it is
 still loading data.


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



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

obj.addEventListener("playing", () => {
  if (obj.networkState === 2) {
    // Still loading…
  }
});
```

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

| Specification |
| --- |
| HTML Standard # dom-media-networkstate-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.networkState` property
HTMLMediaElement: currentTime property
======================================

 The `HTMLMediaElement` interface's
 **`currentTime`** property specifies the current playback time
 in seconds.

 Changing the value of `currentTime` seeks the media to
 the new time.

Value
-----

 A double-precision floating-point value indicating the current playback time in
 seconds.

 If the media is not yet playing, the value of `currentTime` indicates the
 time position within the media at which playback will begin once the
 `play()` method is called.

 Setting `currentTime` to a new value seeks the media to the given time, if
 the media is available.

 For media without a known duration—such as media being streamed live—it's possible that
 the browser may not be able to obtain parts of the media that have expired from the
 media buffer. Also, media whose timeline doesn't begin at 0 seconds cannot be seeked to
 a time before its timeline's earliest time.

 The length of the media in seconds can be determined using the
 `duration` property.

Examples
--------


```js
const video = document.createElement("video");
console.log(video.currentTime);
```

Usage notes
-----------

### Reduced time precision

 To offer protection against timing attacks and fingerprinting, browsers may round or
 otherwise adjust the value returned by `currentTime`.

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

| Specification |
| --- |
| HTML Standard # dom-media-currenttime-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.currentTime` property
* `HTMLMediaElement.fastSeek()`: Another way to set the time
* `HTMLMediaElement.duration`: The duration of the media in seconds