recursal/MDN huggingface dataset:
SourceBuffer: textTracks property
=================================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

 The **`textTracks`** read-only property of the
 `SourceBuffer` interface returns a list of the text tracks currently
 contained inside the `SourceBuffer`.

Value
-----

An `TextTrackList` object.

Examples
--------

TBD

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

| Specification |
| --- |
| Media Source Extensions™ # dom-sourcebuffer-texttracks |

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

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

See also
--------

* `MediaSource`
* `SourceBufferList`
SourceBuffer: updating property
===============================

 The **`updating`** read-only property of the
 `SourceBuffer` interface indicates whether the `SourceBuffer` is
 currently being updated — i.e. whether an `SourceBuffer.appendBuffer()` or `SourceBuffer.remove()`
 operation is currently in progress.

Value
-----

A boolean value.

Examples
--------

TBD

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

| Specification |
| --- |
| Media Source Extensions™ # dom-sourcebuffer-updating |

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

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

See also
--------

* `MediaSource`
* `SourceBufferList`
SourceBuffer: abort() method
============================

 The **`abort()`** method of the `SourceBuffer`
 interface aborts the current segment and resets the segment parser.

Syntax
------


```js
abort()
```

### Parameters

None.

### Return value

None (`undefined`).

### Exceptions

`InvalidStateError` `DOMException`

 Thrown if the `MediaSource.readyState` property of the
 parent media source is not equal to `open`, or this
 `SourceBuffer` has been removed from the
 `MediaSource`.


Examples
--------

 The spec description of `abort()` is somewhat confusing — consider for
 example step 1 of reset parser state. The MSE API is fully asynchronous, but this step seems to suggest a
 synchronous (blocking) operation, which doesn't make sense.

 Saying that, current implementations can be useful in certain situations, when you want
 to stop the current append (or whatever) operation occurring on a sourcebuffer, and then
 immediately start performing operations on it again. For example, consider this code:


```js
sourceBuffer.addEventListener("updateend", (ev) => {
  // ...
});

sourceBuffer.appendBuffer(buf);
```


 Let's say that after the call to `appendBuffer` BUT before the
 `updateend` event fires (i.e. a buffer is being appended but the operation
 has not yet completed) a user "scrubs" the video seeking to a new point in time. In
 this case you would want to manually call `abort()` on the source buffer to
 stop the decoding of the current buffer, then fetch and append the newly requested
 segment that relates to the current new position of the video.

 You can see something similar in action in Nick Desaulnier's bufferWhenNeeded demo — in line 48, an event listener is added to the playing video so a function called
 `seek()` is run when the `seeking` event fires. In lines 92-101, the seek() function is defined — note that `abort()` is called
 if `MediaSource.readyState` is set to `open`, which means that
 it is ready to receive new source buffers — at this point it is worth aborting the
 current segment and just getting the one for the new seek position (see
 `checkBuffer()`
 and
 `getCurrentSegment()`.)

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

| Specification |
| --- |
| Media Source Extensions™ # dom-sourcebuffer-abort |

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

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

See also
--------

* `MediaSource`
* `SourceBufferList`
SourceBuffer: appendBufferAsync() method
========================================

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

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

 The **`appendBufferAsync()`** method
 of the `SourceBuffer` interface begins the process of asynchronously
 appending media segment data from an `ArrayBuffer`,
 a `TypedArray` or a `DataView` object to the `SourceBuffer` object.
 It returns a `Promise` which is fulfilled once the buffer has been appended.

Syntax
------


```js
appendBufferAsync(source)
```

### Parameters

`source`

Either an `ArrayBuffer`, a `TypedArray` or a `DataView` object that contains the media segment data you want to add to the `SourceBuffer`.

### Return value

 A `Promise` which is fulfilled when the buffer has been added successfully to the `SourceBuffer` object,
 or `null`, if the request could not be initiated.

Examples
--------

 This simplified example async function, `fillSourceBuffer()`, takes as input
 parameters `buffer`, an `ArrayBuffer`, a `TypedArray`, or a `DataView`, and a
 `SourceBuffer` object to which to append the source media from the buffer.


```js
async function fillSourceBuffer(buffer, msBuffer) {
  try {
    while (true) {
      await msBuffer.appendBufferAsync(buffer);
    }
  } catch (e) {
    handleException(e);
  }
}
```

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

This feature is not part of any specification. It is not 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
--------

* Media Source Extensions API
* `SourceBuffer.appendBuffer()`
* `MediaSource`
* `SourceBufferList`
SourceBuffer: audioTracks property
==================================

 The **`audioTracks`** read-only property of the
 `SourceBuffer` interface returns a list of the audio tracks currently
 contained inside the `SourceBuffer`.

Value
-----

An `AudioTrackList` object.

Examples
--------

TBD

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

| Specification |
| --- |
| Media Source Extensions™ # dom-sourcebuffer-audiotracks |

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

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

See also
--------

* `MediaSource`
* `SourceBufferList`
SourceBuffer: appendBuffer() method
===================================

 The **`appendBuffer()`** method of the
 `SourceBuffer` interface appends media segment data from an
 `ArrayBuffer`, a `TypedArray` or a `DataView` object
 to the `SourceBuffer`.

Syntax
------


```js
appendBuffer(source)
```

### Parameters

`source`

 Either an `ArrayBuffer`, a `TypedArray` or a `DataView` object
 that contains the media segment data you want to add to the `SourceBuffer`.


### Return value

None (`undefined`).

### Exceptions

None.

Examples
--------

TBD.

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

| Specification |
| --- |
| Media Source Extensions™ # dom-sourcebuffer-appendbuffer |

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

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

See also
--------

* `MediaSource`
* `SourceBufferList`
SourceBuffer: remove() method
=============================

 The **`remove()`** method of the `SourceBuffer`
 interface removes media segments within a specific time range from the
 `SourceBuffer`. This method can only be called when
 `SourceBuffer.updating` equals `false`. If
 `SourceBuffer.updating` is not equal to `false`, call
 `SourceBuffer.abort()`.

Syntax
------


```js
remove(start, end)
```

### Parameters

`start`

A double representing the start of the time range, in seconds.

`end`

A double representing the end of the time range, in seconds.

### Return value

None (`undefined`).

### Exceptions

`InvalidAccessError` `DOMException`

Thrown if either the `MediaSource.duration` property is equal to `NaN`, the `start` parameter is negative or greater than `MediaSource.duration`, or the `end` parameter is less than or equal to `start` or equal to `NaN`.

`InvalidStateError` `DOMException`

 Thrown if the `SourceBuffer.updating` property is equal
 to `true`, or this `SourceBuffer` has been removed
 from `MediaSource`.


Examples
--------

TBD.

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

| Specification |
| --- |
| Media Source Extensions™ # dom-sourcebuffer-remove |

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

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

See also
--------

* `MediaSource`
* `SourceBufferList`
SourceBuffer: appendWindowStart property
========================================

 The **`appendWindowStart`** property of the
 `SourceBuffer` interface controls the timestamp for the start of the append window, a
 timestamp range that can be used to filter what media data is appended to the
 `SourceBuffer`. Coded media frames with timestamps within this range will be
 appended, whereas those outside the range will be filtered out.

 The default value of `appendWindowStart` is the presentation start time,
 which is the beginning time of the playable media.

Value
-----

A double, indicating the start time of the append window, in seconds.

### Exceptions

The following exceptions may be thrown when setting a new value for this property:

`InvalidAccessError` `DOMException`

 Thrown if an attempt was made to set the value to less than 0 or to a value greater
 than or equal to
 `SourceBuffer.appendWindowEnd`.


`InvalidStateError` `DOMException`

 Thrown if this `SourceBuffer` object is being updated (i.e.
 its `SourceBuffer.updating` property is
 currently `true`), or this `SourceBuffer` has been
 removed from the `MediaSource`.


Examples
--------

TBD

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

| Specification |
| --- |
| Media Source Extensions™ # dom-sourcebuffer-appendwindowstart |

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

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

See also
--------

* `MediaSource`
* `SourceBufferList`
SourceBuffer: videoTracks property
==================================

 The **`videoTracks`** read-only property of the
 `SourceBuffer` interface returns a list of the video tracks currently
 contained inside the `SourceBuffer`.

Value
-----

An `VideoTrackList` object.

Examples
--------

TBD

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

| Specification |
| --- |
| Media Source Extensions™ # dom-sourcebuffer-videotracks |

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

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

See also
--------

* `MediaSource`
* `SourceBufferList`
SourceBuffer: timestampOffset property
======================================

 The **`timestampOffset`** property of the
 `SourceBuffer` interface controls the offset applied to timestamps inside
 media segments that are appended to the `SourceBuffer`.

The initial value of `timestampOffset` is 0.

Value
-----

A double, with the offset amount expressed in seconds.

### Exceptions

The following exception may be thrown when setting a new value for this property:

`InvalidStateError` `DOMException`

 Thrown if one or more of the `SourceBuffer` objects in
 `MediaSource.sourceBuffers` are being updated
 (i.e. their `SourceBuffer.updating` property is
 currently `true`), a media segment inside the
 `SourceBuffer` is currently being parsed, or this
 `SourceBuffer` has been removed from the
 `MediaSource`.


Examples
--------

TBD

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

| Specification |
| --- |
| Media Source Extensions™ # dom-sourcebuffer-timestampoffset |

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

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

See also
--------

* `MediaSource`
* `SourceBufferList`
SourceBuffer: appendWindowEnd property
======================================

 The **`appendWindowEnd`** property of the
 `SourceBuffer` interface controls the timestamp for the end of the append window, a
 timestamp range that can be used to filter what media data is appended to the
 `SourceBuffer`. Coded media frames with timestamps within this range will be
 appended, whereas those outside the range will be filtered out.

The default value of `appendWindowEnd` is positive infinity.

Value
-----

A double, indicating the end time of the append window, in seconds.

### Exceptions

The following exceptions may be thrown when setting a new value for this property:

`InvalidAccessError` `DOMException`

 Thrown if an attempt was made to set the value to less than or equal to
 `SourceBuffer.appendWindowStart` or `NaN`.


`InvalidStateError` `DOMException`

 Thrown if this `SourceBuffer` object is being updated (i.e.
 its `SourceBuffer.updating` property is
 currently `true`), or this `SourceBuffer` has been
 removed from the `MediaSource`.


Examples
--------

TBD

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

| Specification |
| --- |
| Media Source Extensions™ # dom-sourcebuffer-appendwindowend |

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

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

See also
--------

* `MediaSource`
* `SourceBufferList`
SourceBuffer: changeType() method
=================================

 The **`changeType()`** method of the
 `SourceBuffer` interface sets the MIME type that future calls to
 `appendBuffer()` should expect the new media
 data to conform to. This makes it possible to change codecs or container type
 mid-stream.

 One scenario in which this is helpful is to support adapting the media source to
 changing bandwidth availability, by transitioning from one codec to another as resource
 constraints change.

Syntax
------


```js
changeType(type)
```

### Parameters

`type`

 A string specifying the MIME type that future buffers will conform
 to.


### Return value

None (`undefined`).

### Exceptions

`TypeError`

Thrown if the specified string is empty, rather than indicating a valid MIME type.

`InvalidStateError` `DOMException`

 Thrown if the `SourceBuffer` is not a member of the parent media source's
 `sourceBuffers` list, or the buffer's
 `updating` property indicates that a previously
 queued `appendBuffer()` or
 `remove()` is still being processed.


`NotSupportedError` `DOMException`

 Thrown if the specified MIME type is not supported, or is not supported with the types of
 `SourceBuffer` objects present in the
 `MediaSource.sourceBuffers` list.


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

 If the `readyState` property of the parent `MediaSource` is set to `"ended"`, calling `changeType()`
 will set the `readyState` property to`"open"` and
 fire a simple event named `sourceopen` at the parent media source.

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

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

See also
--------

* `MediaSource`
* `SourceBufferList`
SourceBuffer: mode property
===========================

 The **`mode`** property of the `SourceBuffer`
 interface controls whether media segments can be appended to the
 `SourceBuffer` in any order, or in a strict sequence.

The two available values are:

* `segments`: The media segment timestamps determine the order in which the
 segments are played. The segments can be appended to the `SourceBuffer` in
 any order.
* `sequence`: The order in which the segments are appended to the
 `SourceBuffer` determines the order in which they are played. Segment
 timestamps are generated automatically for the segments that observe this order.

 The mode value is initially set when the `SourceBuffer` is created using
 `MediaSource.addSourceBuffer()`. If timestamps already exist for the media
 segments, then the value will be set to `segments`; if they don't, then the
 value will be set to `sequence`.

 If you try to set the `mode` property value to `segments` when
 the initial value is `sequence`, an exception will be thrown. The existing
 segment order must be maintained in `sequence` mode. You can, however, change
 the value from `segments` to `sequence`. It just means the play
 order will be fixed, and new timestamps generated to reflect this.

 This property cannot be changed during while the `SourceBuffer` is
 processing either an `appendBuffer()` or
 `remove()` call.

Value
-----

A string.

### Exceptions

The following exceptions may be thrown when setting a new value for this property:

`InvalidAccessError` `DOMException`

 Thrown if an attempt was made to set the value to `segments` when the
 initial value is `sequence`.


`InvalidStateError` `DOMException`

 Thrown if the `SourceBuffer` object is being updated (i.e.
 its `SourceBuffer.updating` property is
 currently `true`), the last media segment appended to this
 `SourceBuffer` is incomplete, or this
 `SourceBuffer` has been removed from the
 `MediaSource`.


Examples
--------

 This snippet sets the `sourceBuffer` mode to `'sequence'` if it
 is currently set to `'segments'`, thus setting the play order to the sequence
 in which media segments are appended.


```js
const curMode = sourceBuffer.mode;
if (curMode === "segments") {
  sourceBuffer.mode = "sequence";
}
```

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

| Specification |
| --- |
| Media Source Extensions™ # dom-sourcebuffer-mode |

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

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

See also
--------

* `MediaSource`
* `SourceBufferList`
SourceBuffer: buffered property
===============================

 The **`buffered`** read-only property of the
 `SourceBuffer` interface returns the time ranges that are currently
 buffered in the `SourceBuffer` as a normalized `TimeRanges`
 object.

Value
-----

A `TimeRanges` object.

Examples
--------

TBD

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

| Specification |
| --- |
| Media Source Extensions™ # dom-sourcebuffer-buffered |

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

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

See also
--------

* `MediaSource`
* `SourceBufferList`
SourceBuffer: removeAsync() method
==================================

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

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

 The **`removeAsync()`** method of the
 `SourceBuffer` interface starts the process of asynchronously removing
 from the `SourceBuffer` media segments found within a specific time
 range. A `Promise` is returned, which is fulfilled when the buffers
 in the specified time range have been removed.

 This method can only be called when `updating` is
 `false`. If that's not the case, call `abort()` instead.

Syntax
------


```js
removeAsync(start, end)
```

### Parameters

`start`

A double representing the start of the time range, in seconds.

`end`

A double representing the end of the time range, in seconds.

### Return value

 A `Promise` whose fulfillment handler is executed once the buffers in the
 specified time range have been removed from the `SourceBuffer`.

Examples
--------

 This example establishes an asynchronous function, `emptySourceBuffer()`,
 which clears the contents of the specified `SourceBuffer`.


```js
async function emptySourceBuffer(msBuffer) {
  await msBuffer.removeAsync(0, Infinity).catch((e) => {
    handleException(e);
  });
}
```

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

This feature is not part of any specification. It is not 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
--------

* Media Source Extensions API
* `SourceBuffer.remove()`
* `MediaSource`
* `SourceBufferList`
DocumentPictureInPicture: enter event
=====================================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`enter`** event of the `DocumentPictureInPicture` interface is fired when the Picture-in-Picture window is successfully opened.

Syntax
------

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


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

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

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

A `DocumentPictureInPictureEvent`.

Examples
--------


```js
documentPictureInPicture.addEventListener("enter", (event) => {
  const pipWindow = event.window;
  console.log("Video player has entered the pip window");

  const pipMuteButton = pipWindow.document.createElement("button");
  pipMuteButton.textContent = "Mute";
  pipMuteButton.addEventListener("click", () => {
    const pipVideo = pipWindow.document.querySelector("#video");
    if (!pipVideo.muted) {
      pipVideo.muted = true;
      pipMuteButton.textContent = "Unmute";
    } else {
      pipVideo.muted = false;
      pipMuteButton.textContent = "Mute";
    }
  });

  pipWindow.document.body.append(pipMuteButton);
});
```

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

| Specification |
| --- |
| Document Picture-in-Picture Specification # dom-documentpictureinpicture-onenter |

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

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

See also
--------

* Document Picture-in-Picture API
* Using the Document Picture-in-Picture API