recursal/MDN huggingface dataset:
HTMLMediaElement: mediaGroup 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.mediaGroup`** property 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 `controller`.

Value
-----

A string.

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.

See also
--------

* `HTMLMediaElement`: Interface used to define the `HTMLMediaElement.mediaGroup` property
HTMLMediaElement: controlsList property
=======================================

 The **`controlsList`** property of the
 `HTMLMediaElement` interface 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`.

Value
-----

A `DOMTokenList`.

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

| Specification |
| --- |
| Unknown specification # solution-outline |

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

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

See also
--------

* Chrome HTMLMediaElement controlsList Sample
HTMLMediaElement: abort event
=============================

The **`abort`** event is fired when the resource was not fully loaded, but not as the result of an error.

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

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

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

A generic `Event`.

Examples
--------


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

video.addEventListener("abort", () => {
  console.log(`Abort loading: ${videoSrc}`);
});

const source = document.createElement("source");
source.setAttribute("src", videoSrc);
source.setAttribute("type", "video/webm");

video.appendChild(source);
```

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

| Specification |
| --- |
| HTML Standard # event-media-abort |
| HTML Standard # handler-onabort |

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

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

See also
--------

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

The **`HTMLMediaElement.preservesPitch`** property determines whether or not the browser should adjust the pitch of the audio to compensate for changes to the playback rate made by setting `HTMLMediaElement.playbackRate`.

Value
-----

A boolean value defaulting to `true`.

Examples
--------

### Setting the preservesPitch property

In this example, we have an `<audio>` element, a range control that adjusts the playback rate, and a checkbox that sets `preservesPitch`.

Try playing the audio, then adjusting the playback rate, then enabling and disabling the checkbox.


```html
<audio
 controls
 src="https://mdn.github.io/webaudio-examples/audio-basics/outfoxing.mp3"></audio>

<div>
  <label for="rate">Adjust playback rate:</label>
  <input id="rate" type="range" min="0.25" max="3" step="0.05" value="1" />
</div>

<div>
  <label for="pitch">Preserve pitch:</label>
  <input type="checkbox" id="pitch" name="pitch" checked />
</div>
```


```
div {
  margin: 0.5rem 0;
}
```



```js
const audio = document.querySelector("audio");
document.getElementById("rate").addEventListener("change", (e) => {
  audio.playbackRate = e.target.value;
});
document.getElementById("pitch").addEventListener("change", (e) => {
  audio.preservesPitch = e.target.checked;
});
```

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

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

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

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

See also
--------

* `HTMLMediaElement.playbackRate`
* Web Audio playbackRate explained
HTMLMediaElement: remote property
=================================

The **`remote`** read-only property of the `HTMLMediaElement` interface returns the `RemotePlayback` object associated with the media element. The `RemotePlayback` object allow the control of remote devices playing the media.

Value
-----

The associated `RemotePlayback` object.

Example
-------


```js
const el = document.createElement("audio");
const remotePlayback = el.remote;

remotePlayback.watchAvailability((availability) => {
  // Do something when the availability changes
});
```

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

| Specification |
| --- |
| Remote Playback API # dom-htmlmediaelement-remote |

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

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

The `pause` event is sent when a request to pause an activity is handled and the activity has entered its paused state, most commonly after the media has been paused through a call to the element's `pause()` method.

The event is sent once the `pause()` method returns and after the media element's `paused` property has been changed to `true`.

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

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

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

A generic `Event`.

Examples
--------

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


Using the `onpause` event handler property:


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

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

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

| Specification |
| --- |
| HTML Standard # event-media-pause |
| HTML Standard # handler-onpause |

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>`
* `SpeechSynthesisUtterance`
HTMLMediaElement: crossOrigin property
======================================

The **`HTMLMediaElement.crossOrigin`** property is the CORS setting for this media element. See CORS settings attributes for details.

Value
-----

A string of a keyword specifying the CORS mode to use when fetching the resource. Possible values are:

`anonymous` or the empty string (`""`)

Requests sent by the `HTMLMediaElement` will use the `cors` mode and the `same-origin` credentials mode. This means that CORS is enabled and credentials are sent *if* the resource is fetched from the same origin from which the document was loaded.

`use-credentials`

Requests sent by the `HTMLMediaElement` will use the `cors` mode and the `include` credentials mode. All resources requests by the element will use CORS, regardless of what domain the fetch is from.

If the `crossOrigin` property is specified with any other value, it is the same as specifing as the `anonymous`.

If the `crossOrigin` property is not specified, the resource is fetched without CORS (the `no-cors` mode and the `same-origin` credentials mode).

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

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

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

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

See also
--------

* `HTMLImageElement.crossOrigin`
* `HTMLLinkElement.crossOrigin`
* `HTMLScriptElement.crossOrigin`
HTMLMediaElement: controls property
===================================

 The **`HTMLMediaElement.controls`** property reflects the
 `controls` HTML attribute, which controls whether user
 interface controls for playing the media item will be displayed.

Value
-----

 A boolean value. A value of `true` means controls will be
 displayed.

Examples
--------


```js
const obj = document.createElement("video");
obj.controls = true;
```

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

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

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.controls` property
HTMLMediaElement: loop property
===============================

The **`HTMLMediaElement.loop`** property reflects the `loop` HTML attribute, which controls whether the media element should start over when it reaches the end.

Value
-----

A boolean value.

Examples
--------


```js
const obj = document.createElement("video");
obj.loop = true; // true
```

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

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

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.loop` property
HTMLMediaElement: seekable property
===================================

The **`seekable`** read-only property of `HTMLMediaElement` objects returns a new static normalized `TimeRanges` object that represents the ranges of the media resource, if any, that the user agent is able to seek to at the time `seekable` property is accessed.

Value
-----

A new static normalized TimeRanges object that represents the ranges of the media resource, if any, that the user agent is able to seek to at the time `seekable` property is accessed.

Examples
--------


```js
const video = document.querySelector("video");
const timeRangesObject = video.seekable;
const timeRanges = [];
//Go through the object and output an array
for (let count = 0; count < timeRangesObject.length; count++) {
  timeRanges.push([timeRangesObject.start(count), timeRangesObject.end(count)]);
}
```

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

| Specification |
| --- |
| HTML Standard # dom-media-seekable-dev |
| Media Source Extensions™ # htmlmediaelement-extensions |

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.seekable` property
* Media Source API
* Media buffering, seeking, and time ranges
HTMLMediaElement: audioTracks property
======================================

 The read-only **`audioTracks`**
 property on `HTMLMediaElement` objects returns
 an `AudioTrackList` object listing all of the `AudioTrack`
 objects representing the media element's audio tracks.

 The media element may be
 either an `<audio>` element or a `<video>` element.

 The returned list is *live*; that is, as tracks are added to and removed from
 the media element, the list's contents change dynamically. Once you have a reference to
 the list, you can monitor it for changes to detect when new audio tracks are added or
 existing ones removed. See AudioTrackList events
 to learn more about watching for changes to a media element's track list.

Value
-----

 An `AudioTrackList` object representing the list of audio tracks included
 in the media element. The list of tracks can be accessed using array notation, or using
 the object's `getTrackById()` method.

 Each track is represented by an `AudioTrack` object which provides
 information about the track.

Examples
--------

In this example, all of the audio tracks on a given element are muted.

### HTML

The HTML establishes the element itself.


```html
<video id="video" src="somevideo.mp4"></video>
```

### JavaScript

The JavaScript code handles muting the video element's audio tracks.


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

for (let i = 0; i < video.audioTracks.length; i += 1) {
  video.audioTracks[i].enabled = false;
}
```

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

| Specification |
| --- |
| HTML Standard # dom-media-audiotracks-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.audioTracks` property
* `<audio>`, `<video>`
* `AudioTrack`, `AudioTrackList`
HTMLMediaElement: playing event
===============================

The `playing` event is fired after playback is first started, and whenever it is restarted. For example it is fired when playback resumes after having been paused or delayed due to 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("playing", (event) => {});

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

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

A generic `Event`.

Examples
--------

These examples add an event listener for the HTMLMediaElement's `playing` 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("playing", (event) => {
  console.log("Video is no longer paused");
});
```


Using the `onplaying` event handler property:


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

video.onplaying = (event) => {
  console.log("Video is no longer paused.");
};
```

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

| Specification |
| --- |
| HTML Standard # event-media-playing |
| HTML Standard # handler-onplaying |

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: canPlayType() method
======================================

The `HTMLMediaElement` method **`canPlayType()`** reports how likely it is that the current browser will be able to play media of a given MIME type.

Syntax
------


```js
canPlayType(type)
```

### Parameters

`type`

A string specifying the MIME type of the media and (optionally) a `codecs` parameter containing a comma-separated list of the supported codecs.

### Return value

 A string indicating how likely it is that the media can be played.
 The string will be one of the following values:

`""` (empty string)

The media cannot be played on the current device.

`probably`

The media is probably playable on this device.

`maybe`

There is not enough information to determine whether the media can play (until playback is actually attempted).

Examples
--------


```js
let obj = document.createElement("video");
console.log(obj.canPlayType("video/mp4")); // "maybe"
```

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

| Specification |
| --- |
| HTML Standard # dom-navigator-canplaytype-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.canPlayType()` method
* `MediaCapabilities`
* Handling media support issues in web content
* Media type and format guide
* Codecs in common media types
HTMLMediaElement: fastSeek() method
===================================

 The **`HTMLMediaElement.fastSeek()`** method quickly seeks the
 media to the new time with precision tradeoff.


**Note:** If you need to seek with precision, you should set `HTMLMediaElement.currentTime`
 instead.


Syntax
------


```js
fastSeek(time)
```

### Parameters

`time`

A double.

### Return value

None (`undefined`).

Examples
--------

This example quickly seeks to 20-second position of the video element.


```js
let myVideo = document.getElementById("myVideoElement");

myVideo.fastSeek(20);
```

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

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

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

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

See also
--------

* HTMLMediaElement.currentTime
 for seeking without precision tradeoff
HTMLMediaElement: load() method
===============================

 The `HTMLMediaElement` method
 **`load()`** resets the media element to its initial state and
 begins the process of selecting a media source and loading the media in preparation
 for playback to begin at the beginning.

 The amount of media data that is
 prefetched is determined by the value of the element's `preload` attribute.

 This method is generally only useful when you've made dynamic changes to the set of
 sources available for the media element, either by changing the element's
 `src` attribute or by adding or removing
 `<source>` elements nested within the media element itself.
 `load()` will reset the element and rescan the available sources, thereby
 causing the changes to take effect.

Syntax
------


```js
load()
```

### Parameters

None.

### Return value

None (`undefined`).

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

 Calling `load()` aborts all ongoing operations involving this media element,
 then begins the process of selecting and loading an appropriate media resource given the
 options specified in the `<audio>` or `<video>` element
 and its `src` attribute or child `<source>`
 element(s). This is described in more detail in the
 Video and audio content page.

 The process of aborting any ongoing activities will cause any outstanding
 `Promise`s returned by `play()` being
 fulfilled or rejected as appropriate based on their status before the loading of new
 media can begin. Pending play promises are aborted with an `"AbortError"`
`DOMException`.

 Appropriate events will be sent to the media element itself as the load process
 proceeds:

* If the element is already in the process of loading media, that load process is
 aborted and the **`abort`** event is sent.
* If the element has already been initialized with media, the
 **`emptied`** event is sent.
* If resetting the playback position to the beginning of the media actually changes
 the playback position (that is, it was not already at the beginning), a
 **`timeupdate`** event is sent.
* Once media has been selected and loading is ready to begin, the
 **`loadstart`** event is delivered.
* From this point onward, events are sent just like any media load.
Examples
--------

 This example finds a `<video>` element in the document and resets it by
 calling `load()`.


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

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

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

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

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

The **`HTMLMediaElement.defaultMuted`** property reflects the `muted` HTML attribute, which indicates whether the media element's audio output should be muted by default. This property has no dynamic effect. To mute and unmute the audio output, use the `muted` property.

Value
-----

A boolean value. A value of `true` means that the audio output will be muted by default.

Examples
--------


```js
const videoEle = document.createElement("video");
videoEle.defaultMuted = true;
console.log(videoEle.outerHTML); // <video muted=""></video>
```

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

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

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.defaultMuted` property
* `HTMLMediaElement.muted`
* `HTMLMediaElement.volume`