recursal/MDN huggingface dataset:
HTMLVideoElement: leavepictureinpicture event
=============================================

The `leavepictureinpicture` event is fired when the `HTMLVideoElement` leaves picture-in-picture mode successfully.

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

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

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

A `PictureInPictureEvent`. Inherits from `Event`.

Event

PictureInPictureEventEvent properties
----------------

This interface also inherits properties from its parent `Event`.

Examples
--------

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

Using `addEventListener()`:


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

function onExitPip() {
  console.log("Picture-in-Picture mode deactivated!");
}

video.addEventListener("leavepictureinpicture", onExitPip, false);

button.onclick = () => {
  if (document.pictureInPictureElement) {
    document.exitPictureInPicture();
  }
};
```


Using the `onleavepictureinpicture` event handler property:


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

function onExitPip() {
  console.log("Picture-in-Picture mode deactivated!");
}

video.onleavepictureinpicture = onExitPip;

button.onclick = () => {
  if (document.pictureInPictureElement) {
    document.exitPictureInPicture();
  }
};
```

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

| Specification |
| --- |
| Picture-in-Picture # eventdef-htmlvideoelement-leavepictureinpicture |
| Picture-in-Picture # dom-htmlvideoelement-onleavepictureinpicture |

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

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

See also
--------

* `HTMLVideoElement`
* `Picture-in-Picture API`
HTMLVideoElement: disablePictureInPicture property
==================================================

The `HTMLVideoElement` **`disablePictureInPicture`** property reflects the HTML attribute indicating whether the picture-in-picture feature is disabled for the current element.

Value
-----

A boolean value that is `true` if the picture-in-picture feature is disabled for this element. This means that the user agent should not suggest that feature to users, or request it automatically.

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

| Specification |
| --- |
| Picture-in-Picture # disable-pip |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HTMLVideoElement: getVideoPlaybackQuality() method
==================================================

 The **`HTMLVideoElement`** method
 **`getVideoPlaybackQuality()`** creates and returns a
 `VideoPlaybackQuality` object containing metrics including how many
 frames have been lost.

The data returned can be used to evaluate the quality of the video stream.

Syntax
------


```js
getVideoPlaybackQuality()
```

### Parameters

None.

### Return value

 A `VideoPlaybackQuality` object providing information about the video
 element's current playback quality.

Examples
--------

 This example updates an element to indicate the total number of video frames that have
 elapsed so far in the playback process. This value includes any dropped or corrupted
 frames, so it's not the same as "total number of frames played."


```js
const videoElem = document.getElementById("my\_vid");
const counterElem = document.getElementById("counter");
const quality = videoElem.getVideoPlaybackQuality();

counterElem.innerText = quality.totalVideoFrames;
```

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

| Specification |
| --- |
| Media Playback Quality # dom-htmlvideoelement-getvideoplaybackquality |

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

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

See also
--------

* The `<video>` element
* The `VideoPlaybackQuality` interface.
HTMLVideoElement: videoWidth property
=====================================

 The `HTMLVideoElement` interface's read-only **`videoWidth`** property indicates the intrinsic width of the video, expressed in CSS pixels.
 In simple terms, this is the width of the media in its natural size.

See `HTMLVideoElement.videoHeight` > About intrinsic width and height for more details.

Value
-----

 An integer value specifying the intrinsic width of the video in CSS pixels.
 If the element's `readyState` is `HTMLMediaElement.HAVE_NOTHING`, then the value of this property is 0, because neither video nor poster frame size information is yet available.

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

| Specification |
| --- |
| HTML Standard # dom-video-videowidth-dev |

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

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

 The `HTMLVideoElement` interface's read-only **`videoHeight`** property indicates the intrinsic height of the video, expressed in CSS pixels.
 In simple terms, this is the height of the media in its natural size.

Value
-----

 An integer value specifying the intrinsic height of the video in CSS pixels.
 If the element's `readyState` is `HTMLMediaElement.HAVE_NOTHING`, then the value of this property is 0, because neither video nor poster frame size information is yet available.

### About intrinsic width and height

A user agent calculates the intrinsic width and height of the element's media by starting with the media's raw pixel width and height, then taking into account factors including:

* The media's aspect ratio.
* The media's clean aperture (the sub-rectangle centered within the media that matches
 the target aspect ratio).
* The target device's resolution.
* Any other factors required by the media format.

If the element is currently displaying the poster frame rather than rendered video, the poster frame's intrinsic size is considered to be the size of the `<video>` element.

 If at any time the intrinsic size of the media changes and the element's `readyState` isn't `HAVE_NOTHING`, a `resize` event will be sent to the `<video>` element.
 This can happen when the element switches from displaying the poster frame to displaying video content, or when the displayed video track changes.

Examples
--------

This example creates a handler for the `resize` event that resizes the `<video>` element to match the intrinsic size of its contents.


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

v.addEventListener(
  "resize",
  (ev) => {
    let w = v.videoWidth;
    let h = v.videoHeight;

    if (w && h) {
      v.style.width = w;
      v.style.height = h;
    }
  },
  false,
);
```


 Note that this only applies the change if both the `videoWidth` and the `videoHeight` are non-zero.
 This avoids applying invalid changes when there's no true information available yet for dimensions.

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

| Specification |
| --- |
| HTML Standard # dom-video-videoheight-dev |

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

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

The `enterpictureinpicture` event is fired when the `HTMLVideoElement` enters picture-in-picture mode successfully.

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

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

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

A `PictureInPictureEvent`. Inherits from `Event`.

Event

PictureInPictureEventEvent properties
----------------

This interface also inherits properties from its parent `Event`.

Examples
--------

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

Using `addEventListener()`:


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

function onEnterPip() {
  console.log("Picture-in-Picture mode activated!");
}

video.addEventListener("enterpictureinpicture", onEnterPip, false);

button.onclick = () => {
  video.requestPictureInPicture();
};
```


Using the `onenterpictureinpicture` event handler property:


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

function onEnterPip() {
  console.log("Picture-in-Picture mode activated!");
}

video.onenterpictureinpicture = onEnterPip;

button.onclick = () => {
  video.requestPictureInPicture();
};
```

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

| Specification |
| --- |
| Picture-in-Picture # eventdef-htmlvideoelement-enterpictureinpicture |
| Picture-in-Picture # dom-htmlvideoelement-onenterpictureinpicture |

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

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

See also
--------

* `HTMLVideoElement`
* `Picture-in-Picture API`
CSSNumericValue: add() method
=============================

 The **`add()`** method of the
 `CSSNumericValue` interface adds a supplied number to the
 `CSSNumericValue`.

Syntax
------


```js
add(number)
```

### Parameters

`number`

Either a number or a `CSSNumericValue`.

### Return value

A `CSSMathSum`

### Exceptions

`TypeError`

Thrown if an invalid type was passed to the method.

Examples
--------


```js
let mathSum = CSS.px("23")
  .add(CSS.percent("4"))
  .add(CSS.cm("3"))
  .add(CSS.in("9"));
// Prints "calc(23px + 4% + 3cm + 9in)"
console.log(mathSum.toString());
```

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

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssnumericvalue-add |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CSSNumericValue: to() method
============================

 The **`to()`** method of the
 `CSSNumericValue` interface converts a numeric value from one unit to
 another.

Syntax
------


```js
to(unit)
```

### Parameters

`unit`

The unit to which you want to convert.

### Return value

A `CSSMathSum`.

### Exceptions

`SyntaxError` `DOMException`

Thrown if an invalid type was passed to the method.

`TypeError`

Thrown if the passed values cannot be summed.

Examples
--------


```js
// Prints "0.608542cm"
console.log(CSS.px("23").to("cm").toString());
```

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

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssnumericvalue-to |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CSSNumericValue: max() method
=============================

 The **`max()`** method of the
 `CSSNumericValue` interface returns the highest value from among the values
 passed. The passed values must be of the same type.

Syntax
------


```js
max(number1, /\* …, \*/ numberN)
```

### Parameters

`number1`, …, `numberN`

Either a number or a `CSSNumericValue`.

### Return value

A `CSSUnitValue`.

### Exceptions

`TypeError`

Thrown if an invalid type was passed to the method.

Examples
--------

 As stated earlier, all passed values must be of the same type and value. Some of the
 following examples illustrate what happens when they are not.


```js
// Prints "2cm"
console.log(CSS.cm("1").max(CSS.cm("2")).toString());

// Prints "max(1cm, 0.393701in)"
console.log(CSS.cm("1").max(CSS.in("0.393701")).toString());
```

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

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssnumericvalue-max |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CSSNumericValue: min() method
=============================

 The **`min()`** method of the
 `CSSNumericValue` interface returns the lowest value from among those
 values passed. The passed values must be of the same type.

Syntax
------


```js
min(number1, /\* …, \*/ numberN)
```

### Parameters

`number1`, …, `numberN`

Either a number or a `CSSNumericValue`.

### Return value

A `CSSUnitValue`.

### Exceptions

`TypeError`

Thrown if an invalid type was passed to the method.

Examples
--------

 As stated earlier, all passed values must be of the same type and value. Some of the
 following examples illustrate what happens when they are not.


```js
// Prints "1cm"
console.log(CSS.cm("1").min(CSS.cm("2")).toString());

// Prints "max(1cm, 0.393701in)"
console.log(CSS.cm("1").max(CSS.in("0.393701")).toString());
```

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

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssnumericvalue-min |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CSSNumericValue: div() method
=============================

 The **`div()`** method of the
 `CSSNumericValue` interface divides the `CSSNumericValue` by the
 supplied value.

Syntax
------


```js
div(number)
```

### Parameters

`number`

Either a number or a `CSSNumericValue`.

### Return value

A `CSSMathProduct`.

### Exceptions

`TypeError`

Thrown if an invalid type was passed to the method.

Examples
--------


```js
let mathProduct = CSS.px("24").div(CSS.percent("4"));
// Prints "calc(24px / 4%)"
mathProduct.toString();
```

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

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssnumericvalue-div |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CSSNumericValue: equals() method
================================

 The **`equals()`** method of the
 `CSSNumericValue` interface returns a boolean indicating whether the passed
 value are strictly equal. To return a value of `true`, all passed values must
 be of the same type and value and must be in the same order. This allows structural
 equality to be tested quickly.

Syntax
------


```js
equals(number)
```

### Parameters

`number`

Either a number or a `CSSNumericValue`.

### Return value

A boolean value.

### Exceptions

None.

Examples
--------

 As stated earlier, all passed values must be of the same type and value and must be in
 the same order. Some of the following examples illustrate what happens when they are
 not.


```js
let cssMathSum = new CSSMathSum(CSS.px(1), CSS.px(2));
let matchingCssMathSum = new CSSMathSum(CSS.px(1), CSS.px(2));
// Prints true
console.log(cssMathSum.equals(matchingCssMathSum));

let otherCssMathSum = CSSMathSum(CSS.px(2), CSS.px(1));
// Prints false
console.log(cssMathSum.equals(otherCssMathSum));

// Also prints false
console.log(CSS.cm("1").equal(CSS.in("0.393701")));
```

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

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssnumericvalue-equals |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CSSNumericValue: type() method
==============================

 The **`type()`** method of the
 `CSSNumericValue` interface returns the type of
 `CSSNumericValue`, one of `angle`, `flex`,
 `frequency`, `length`, `resolution`,
 `percent`, `percentHint`, or `time`.

Syntax
------


```js
type()
```

### Parameters

None.

### Return value

A `CSSNumericType` object.

### Exceptions

None.

Examples
--------


```js
let mathSum = CSS.px("23")
  .sub(CSS.percent("4"))
  .sub(CSS.cm("3"))
  .sub(CSS.in("9"));
// Returns an object with the structure: {length: 1, percentHint: "length"}
let cssNumericType = mathSum.type();
```

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

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssnumericvalue-type |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CSSNumericValue: toSum() method
===============================

 The **`toSum()`** method of the
 `CSSNumericValue` interface converts the object's value to a
 `CSSMathSum` object to values of the specified unit.

Syntax
------


```js
toSum(units)
```

### Parameters

`units`

The units to convert to.

### Return value

A `CSSNumericValue`.

### Exceptions

`TypeError`

Thrown if an invalid type was passed to the method.

Examples
--------


```js
let v = CSS.px("23").add(CSS.percent("4")).add(CSS.cm("3")).add(CSS.in("9"));
v.toString(); // => "calc(23px + 4% + 3cm + 9in)"
v.toSum("px", "percent").toString(); // => "calc(1000.39px + 4%)"
```

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

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssnumericvalue-tosum |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CSSNumericValue: mul() method
=============================

 The **`mul()`** method of the
 `CSSNumericValue` interface multiplies the `CSSNumericValue` by
 the supplied value.

Syntax
------


```js
mul(number)
```

### Parameters

`number`

Either a number or a `CSSNumericValue`.

### Return value

A `CSSMathProduct`

### Exceptions

`TypeError`

Thrown if an invalid type was passed to the method.

Examples
--------


```js
let mathSum = CSS.px("23")
  .mul(CSS.percent("4"))
  .mul(CSS.cm("3"))
  .mul(CSS.in("9"));
// Prints "calc(23px \* 4% \* 3cm \* 9in)"
console.log(mathSum.toString());
```

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

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssnumericvalue-mul |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CSSNumericValue: parse() static method
======================================

 The **`parse()`** static method of the
 `CSSNumericValue` interface converts a value string into an object whose
 members are value and the units.

Syntax
------


```js
CSSNumericValue.parse(cssText)
```

### Parameters

`cssText`

a string containing numeric and unit parts.

### Return value

A `CSSNumericValue`.

### Exceptions

`SyntaxError` `DOMException`

TBD

Examples
--------

 The following returns a `CSSUnitValue` object with a `unit`
 property equal to `"px"` and a `value` property equal to
 `42`.


```js
let numValue = CSSNumericValue.parse("42.0px");
```

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

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssnumericvalue-parse |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CSSNumericValue: sub() method
=============================

 The **`sub()`** method of the
 `CSSNumericValue` interface subtracts a supplied number from the
 `CSSNumericValue`.

Syntax
------


```js
sub(number)
```

### Parameters

`number`

Either a number or a `CSSMathSum`.

### Return value

A `CSSMathSum`

### Exceptions

`TypeError`

Thrown if an invalid type was passed to the method.

Examples
--------


```js
let mathSum = CSS.px("23")
  .sum(CSS.percent("4"))
  .sum(CSS.cm("3"))
  .sum(CSS.in("9"));
// Prints "calc(23px - 4% - 3cm - 9in)"
console.log(mathSum.toString());
```

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

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssnumericvalue-sub |

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

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

The **`TextDecoder.encoding`** read-only property returns a string containing the name of the decoding algorithm used by the specific decoder object.

The encoding is set by the constructor `label` parameter, and defaults to `utf-8`.

Value
-----

A lower-cased ASCII string, which can be one of the following values:

* The recommended encoding for the Web: `'utf-8'`.
* The legacy single-byte encodings:
 'ibm866',
 'iso-8859-2',
 'iso-8859-3',
 'iso-8859-4',
 'iso-8859-5',
 'iso-8859-6',
 'iso-8859-7',
 'iso-8859-8''`,
 'iso-8859-8i',
 'iso-8859-10',
 'iso-8859-13',
 'iso-8859-14',
 'iso-8859-15',
 'iso-8859-16',
 'koi8-r',
 'koi8-u',
 'macintosh',
 'windows-874',
 'windows-1250',
 'windows-1251',
 'windows-1252',
 'windows-1253',
 'windows-1254',
 'windows-1255',
 'windows-1256',
 'windows-1257',
 'windows-1258', or
 'x-mac-cyrillic'.
* The legacy multi-byte Chinese (simplified) encodings:
 'gbk',
 'gb18030'.
* The legacy multi-byte Chinese (traditional) encoding:
 'big5'.
* The legacy multi-byte Japanese encodings:
 'euc-jp',
 'iso-2022-jp',
 'shift-jis'.
* The legacy multi-byte Korean encodings:
 'euc-kr'.
* The legacy miscellaneous encodings:
 'utf-16be',
 'utf-16le',
 `'x-user-defined'`.
* A special encoding, `'replacement'`.
 This decodes empty input into empty output and any other arbitrary-length input into a single replacement character.
 It is used to prevent attacks that mismatch encodings between the client and server.
 The following encodings also map to the replacement encoding: `ISO-2022-CN`, `ISO-2022-CN-ext`, 'iso-2022-kr', and 'hz-gb-2312'.
Specifications
--------------

| Specification |
| --- |
| Encoding Standard # ref-for-dom-textdecoder-encoding① |

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

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

See also
--------

* The `TextDecoder` interface it belongs to.
TextDecoder: ignoreBOM property
===============================

The **`ignoreBOM`** read-only property of the `TextDecoder` interface is a `Boolean` indicating whether the byte order mark will be included in the output or skipped over.

Value
-----

`true` if the byte order mark will be included in the decoded text; `false` if it will be skipped over when decoding and omitted.

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

| Specification |
| --- |
| Encoding Standard # ref-for-dom-textdecoder-ignorebom① |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
TextDecoder: TextDecoder() constructor
======================================

The **`TextDecoder()`** constructor returns a newly created `TextDecoder` object for the encoding specified in parameter.

Syntax
------


```js
new TextDecoder()
new TextDecoder(label)
new TextDecoder(label, options)
```

### Parameters

`label` Optional

 A string, defaulting to `"utf-8"`.
 This may be any valid label.


`options` Optional

An object with the following properties:

`fatal` Optional

 A boolean value indicating if the `TextDecoder.decode()` method must throw a `TypeError` when decoding invalid data.
 It defaults to `false`, which means that the decoder will substitute malformed data with a replacement character.


`ignoreBOM` Optional

 A boolean value indicating whether the byte order mark will be included in the output or skipped over.
 It defaults to `false`, which means that the byte order mark will be skipped over when decoding and will not be included in the decoded text.



### Exceptions

`RangeError`

Thrown if the value of `label` is unknown, or is one of the values leading to a `'replacement'` decoding algorithm (`"iso-2022-cn"` or `"iso-2022-cn-ext"`).

Examples
--------


```js
const textDecoder1 = new TextDecoder("iso-8859-2");
const textDecoder2 = new TextDecoder();
const textDecoder3 = new TextDecoder("csiso2022kr", { fatal: true }); // Allows TypeError exception to be thrown.
const textDecoder4 = new TextDecoder("iso-2022-cn"); // Throw a RangeError exception.
```

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

| Specification |
| --- |
| Encoding Standard # ref-for-dom-textdecoder① |

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

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

See also
--------

* The `TextDecoder` interface it belongs to.