recursal/MDN huggingface dataset:
TextTrackCue: endTime property
==============================

The **`endTime`** property of the `TextTrackCue` interface returns and sets the end time of the cue.

Value
-----

A number representing the end time, in seconds.

Examples
--------

In the following example a new `VTTCue` (which inherits from `TextTrackCue`) is created starting at 0.1 second and ending at 0.9 seconds. The `endTime` property is then printed to the console.


```js
let video = document.querySelector("video");
let track = video.addTextTrack("captions", "Captions", "en");
track.mode = "showing";

let cue1 = new VTTCue(0.1, 0.9, "Hildy!");
console.log(cue1.endTime); // 0.9
track.addCue(cue1);
```

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

| Specification |
| --- |
| HTML Standard # dom-texttrackcue-endtime |

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

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

The **`startTime`** property of the `TextTrackCue` interface returns and sets the start time of the cue.

Value
-----

A number representing the start time, in seconds.

Examples
--------

In the following example a new `VTTCue` (which inherits from `TextTrackCue`) is created starting at 0.1 second and ending at 0.9 seconds. The `startTime` property is then printed to the console.


```js
let video = document.querySelector("video");
let track = video.addTextTrack("captions", "Captions", "en");
track.mode = "showing";

let cue1 = new VTTCue(0.1, 0.9, "Hildy!");
console.log(cue1.startTime); // 0.1
track.addCue(cue1);
```

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

| Specification |
| --- |
| HTML Standard # dom-texttrackcue-starttime |

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

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

The **`id`** property of the `TextTrackCue` interface returns and sets the identifier for this cue.

Value
-----

A string containing the ID of this cue.

Examples
--------

In the following example a new `VTTCue` (which inherits from `TextTrackCue`) is created. The `id` property is then set to "first", before the cue is added.


```js
let video = document.querySelector("video");
let track = video.addTextTrack("captions", "Captions", "en");
track.mode = "showing";

let cue1 = new VTTCue(0, 0.9, "Hildy!");
cue1.id = "first";
track.addCue(cue1);
```

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

| Specification |
| --- |
| HTML Standard # dom-texttrackcue-id |

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

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

The **`enter`** event fires when a cue becomes active. In the case of subtitles or a caption this is when it displays over the media.

Syntax
------

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


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

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

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

A generic `Event` with no added properties.

Example
-------

In the following example, `cue1` prints to the console when it is the active cue.


```js
cue1.addEventListener("enter", (event) => {
  console.log("Cue 1 has displayed");
});
```

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

| Specification |
| --- |
| HTML Standard # event-media-enter |
| HTML Standard # handler-texttrackcue-onenter |

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

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

 The **`parseAll()`** static method of the `CSSStyleValue`
 interface sets all occurrences of a specific CSS property to the specified value and
 returns an array of `CSSStyleValue` objects, each containing one of the
 supplied values.

Syntax
------


```js
CSSStyleValue.parseAll(property, value)
```

### Parameters

`property`

A CSS property to set.

`value`

 A comma-separated string containing one or more values that apply to the provided
 property.


### Return value

 An array of `CSSStyleValue` objects, each containing one of the supplied
 values.

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

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssstylevalue-parseall |

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

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

See also
--------

* `CSSStyleValue.parse()`
* Using the CSS Typed OM
* CSS Typed Object Model API
CSSStyleValue: parse() static method
====================================

 The **`parse()`** static method of the `CSSStyleValue`
 interface sets a specific CSS property to the specified values and returns the first
 value as a `CSSStyleValue` object.

Syntax
------


```js
CSSStyleValue.parse(property, cssText)
```

### Parameters

`property`

A CSS property to set.

`cssText`

 A comma-separated string containing one or more values to apply to the provided
 property.


### Return value

A `CSSStyleValue` object containing the first supplied value.

Examples
--------

 The code below parses a set of declarations for the `transform` property.
 The second code block shows the structure of the returned object as it would be rendered
 in a developer tools console.


```js
const css = CSSStyleValue.parse(
  "transform",
  "translate3d(10px,10px,0) scale(0.5)",
);
```



```css
CSSTransformValue {0: CSSTranslate, 1: CSSScale, length: 2, is2D: false}
```

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

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

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

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

See also
--------

* `CSSStyleValue.parseAll()`
* Using the CSS Typed OM
* CSS Typed Object Model API
BroadcastChannel: postMessage() method
======================================

Baseline 2022
-------------

Newly availableSince March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback

 The **`BroadcastChannel.postMessage()`** sends a message,
 which can be of any kind of `Object`,
 to each listener in any browsing context with the same origin.
 The message is transmitted as a 'message' event
 targeted at each `BroadcastChannel` bound to the channel.

**Note:** This feature is available in Web Workers

Syntax
------


```js
channel.postMessage(message)
```

### Parameters

`message`

 Data to be sent to the other window. The data is serialized using the structured clone algorithm.
 This means you can pass a broad variety of data objects safely to the destination window without having to serialize them yourself.


### Return value

None.

### Exceptions

`InvalidStateError` `DOMException`

Thrown if the `BroadcastChannel` has already been closed.

`DataCloneError` `DOMException`

Thrown if any part of the input data is not serializable.

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

| Specification |
| --- |
| HTML Standard # dom-broadcastchannel-postmessage-dev |

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

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

See also
--------

* `BroadcastChannel`, the interface it belongs to.
BroadcastChannel: close() method
================================

Baseline 2022
-------------

Newly availableSince March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback

 The **`BroadcastChannel.close()`** terminates the connection to
 the underlying channel, allowing the object to be garbage collected.
 This is a necessary step to perform
 as there is no other way for a browser to know
 that this channel is not needed anymore.

**Note:** This feature is available in Web Workers

Syntax
------


```js
channel.close()
```

Example
-------


```js
// Connect to a channel
const bc = new BroadcastChannel("test\_channel");

// More operations (like postMessage, …)

// When done, disconnect from the channel
bc.close();
```

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

| Specification |
| --- |
| HTML Standard # dom-broadcastchannel-close-dev |

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

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

See also
--------

* `BroadcastChannel`, the interface it belongs to.
BroadcastChannel: BroadcastChannel() constructor
================================================

Baseline 2022
-------------

Newly availableSince March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback

 The **`BroadcastChannel()`** constructor creates a new
 `BroadcastChannel` and connects it to the underlying channel.

**Note:** This feature is available in Web Workers

Syntax
------


```js
new BroadcastChannel(channelName)
```

### Parameters

`channelName`

 A string representing the name of the channel; there is one
 single channel with this name for all browsing
 contexts with the same origin.


Examples
--------


```js
// create a new channel listening to the "internal\_notification" channel.

const bc = new BroadcastChannel("internal\_notification");
bc.postMessage("New listening connected!");
```

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

| Specification |
| --- |
| HTML Standard # dom-broadcastchannel-dev |

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

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

See also
--------

* `BroadcastChannel`, the interface it belongs to.
BroadcastChannel: name property
===============================

Baseline 2022
-------------

Newly availableSince March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
The read-only **`BroadcastChannel.name`** property returns a string, which uniquely identifies the given channel with its name. This name is passed to the `BroadcastChannel()` constructor at creation time and is therefore read-only.

**Note:** This feature is available in Web Workers

Values
------

A string.

Examples
--------


```js
// Connect to a channel
const bc = new BroadcastChannel("test\_channel");

// More operations (like postMessage, …)

// Log the channel name to the console
console.log(bc.name); // "test\_channel"

// When done, disconnect from the channel
bc.close();
```

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

| Specification |
| --- |
| HTML Standard # dom-broadcastchannel-name-dev |

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

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

See also
--------

* `BroadcastChannel`, the interface it belongs to.
BroadcastChannel: messageerror event
====================================

Baseline 2022
-------------

Newly availableSince March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
The `messageerror` event is fired on a `BroadcastChannel` object when a message that can't be deserialized arrives on the channel.

Syntax
------

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


```js
addEventListener("messageerror", (event) => { })
onmessageerror = (event) => { }
```

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

A `MessageEvent`. Inherits from `Event`.

Event

MessageEventEvent properties
----------------

*In addition to the properties listed below, properties from the parent interface, `Event`, are available.*

`data` Read only 

The data sent by the message emitter.

`origin` Read only 

A string representing the origin of the message emitter.

`lastEventId` Read only 

A string representing a unique ID for the event.

`source` Read only 

A *message event source*, which is either a WindowProxy, a `MessagePort`, or a `ServiceWorker` object representing the message emitter.

`ports` Read only 

An array of `MessagePort` objects representing the ports associated with the channel the message is being sent through (where appropriate, e.g. in channel messaging or when sending a message to a shared worker).

Examples
--------

This code uses `addEventListener` to listen for messages and errors:


```js
const channel = new BroadcastChannel("example-channel");

channel.addEventListener("message", (event) => {
  received.textContent = event.data;
});

channel.addEventListener("messageerror", (event) => {
  console.error(event);
});
```


The same, but using the `onmessage` and `onmessageerror` event handler properties:


```js
const channel = new BroadcastChannel("example-channel");

channel.onmessage = (event) => {
  received.textContent = event.data;
};

channel.onmessageerror = (event) => {
  console.log(event);
};
```

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

| Specification |
| --- |
| HTML Standard # event-messageerror |
| HTML Standard # handler-broadcastchannel-onmessageerror |

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

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

See also
--------

* Related events: `message`.
VTTCue: snapToLines property
============================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Learn more
* See full compatibility
* Report feedback
The **`snapToLines`** property of the `VTTCue` interface is a `Boolean` indicating if the `VTTCue.line` property is an integer number of lines, or a percentage of the video size.

Value
-----

A `Boolean`.

Examples
--------

In the following example a new `VTTCue` is created, then the value of `snapToLines` is set to `true`. The value is then printed to the console.


```js
let video = document.querySelector("video");
let track = video.addTextTrack("captions", "Captions", "en");
track.mode = "showing";

let cue1 = new VTTCue(0, 0.9, "Hildy!");
cue1.snapToLines = true;
console.log(cue1.snapToLines);

track.addCue(cue1);
```

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

| Specification |
| --- |
| WebVTT: The Web Video Text Tracks Format # dom-vttcue-snaptolines |

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

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

The **`region`** property of the `VTTCue` interface returns and sets the `VTTRegion` that this cue belongs to.

Value
-----

A `VTTRegion` object.

Examples
--------

In the following example a new `VTTCue` is created, then the value of `region` is printed to the console.


```js
let video = document.querySelector("video");
let track = video.addTextTrack("captions", "Captions", "en");
track.mode = "showing";

let cue1 = new VTTCue(0, 0.9, "Hildy!");
console.log(cue1.region);

track.addCue(cue1);
```

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

| Specification |
| --- |
| WebVTT: The Web Video Text Tracks Format # dom-vttcue-region |

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

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

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Learn more
* See full compatibility
* Report feedback

 The **`VTTCue()`** constructor creates and returns a new
 `VTTCue` object.

Syntax
------


```js
new VTTCue(startTime, endTime, text)
```

### Parameters

`startTime`

 This is a `double` representing the initial text track cue start time.
 This is the time, given in seconds and fractions of a second, denoting the beginning
 of the range of the media data to which this cue applies. For example, if a cue is to
 be visible from 50 seconds to a one minute, five and a half seconds in the media's
 playback, `startTime` will be 50.0.


`endTime`

 This is a `double` representing the ending time for this text track cue.
 This is the time at which the cue should stop being presented to the user, given in
 seconds and fractions thereof. Given the example cue mentioned under
 `startTime`, the value of `endTime` would be 65.5.


`text`

 A string providing the text that will be shown during the time
 span indicated by `startTime` and `endTime`.


### Return value

 A new `VTTCue` object representing a cue which will be presented during
 the time span given.

Examples
--------


```js
// Create a cue that is shown from 2 to 3 seconds and uses the given text.
let cue = new VTTCue(2, 3, "Cool text to be displayed");
```

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

| Specification |
| --- |
| WebVTT: The Web Video Text Tracks Format # dom-vttcue-vttcue |

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

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

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Learn more
* See full compatibility
* Report feedback
The **`line`** property of the `VTTCue` interface represents the cue line of this WebVTT cue.

Value
-----

A number, or `"auto"` representing the cue line of this WebVTT cue.

Examples
--------

In the following example a new `VTTCue` is created, then the value of `line` is set to `1`. The value is then printed to the console.


```js
let video = document.querySelector("video");
let track = video.addTextTrack("captions", "Captions", "en");
track.mode = "showing";

let cue1 = new VTTCue(0, 0.9, "Hildy!");
cue1.line = "1";
console.log(cue1.line);

track.addCue(cue1);
```

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

| Specification |
| --- |
| WebVTT: The Web Video Text Tracks Format # dom-vttcue-line |

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

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

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Learn more
* See full compatibility
* Report feedback
The **`getCueAsHTML()`** method of the `VTTCue` interface returns a `DocumentFragment` containing the cue content.

Syntax
------


```js
getCueAsHTML()
```

### Parameters

None.

### Return value

A `DocumentFragment` .

Examples
--------

In the following example a new `VTTCue` is created. The value as a document fragment is then printed to the console.


```js
let video = document.querySelector("video");
let track = video.addTextTrack("captions", "Captions", "en");
track.mode = "showing";

let cue1 = new VTTCue(0, 0.9, "Hildy!");
console.log(cue1.getCueAsHTML());

track.addCue(cue1);
```

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

| Specification |
| --- |
| WebVTT: The Web Video Text Tracks Format # dom-vttcue-getcueashtml |

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

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

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Learn more
* See full compatibility
* Report feedback
The **`align`** property of the `VTTCue` interface represents the alignment of all of the lines of text in the text box.

Value
-----

A string containing one of the following values:

`"start"`

Start alignment.

`"center"`

Center alignment.

`"end"`

End alignment.

`"left"`

Left alignment.

`"right"`

Right alignment.

Examples
--------

In the following example a new `VTTCue` is created, then the value of `align` is set to `"start"`. The value is then printed to the console.


```js
let video = document.querySelector("video");
let track = video.addTextTrack("captions", "Captions", "en");
track.mode = "showing";

let cue1 = new VTTCue(0, 0.9, "Hildy!");
cue1.align = "start";
console.log(cue1.align);

track.addCue(cue1);
```

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

| Specification |
| --- |
| WebVTT: The Web Video Text Tracks Format # dom-vttcue-align |

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

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

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Learn more
* See full compatibility
* Report feedback
The **`position`** property of the `VTTCue` interface represents the indentation of the cue within the line.

Value
-----

A number, or `"auto"` representing the indentation of the cue within the line.

Examples
--------

In the following example a new `VTTCue` is created, then the value of `position` is set to `2`. The value is then printed to the console.


```js
let video = document.querySelector("video");
let track = video.addTextTrack("captions", "Captions", "en");
track.mode = "showing";

let cue1 = new VTTCue(0, 0.9, "Hildy!");
cue1.position = "2";
console.log(cue1.position);

track.addCue(cue1);
```

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

| Specification |
| --- |
| WebVTT: The Web Video Text Tracks Format # dom-vttcue-position |

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

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

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Learn more
* See full compatibility
* Report feedback
The **`vertical`** property of the `VTTCue` interface is a string representing the cue's writing direction.

Value
-----

A string containing one of the following values:

`""` (an empty string)

Represents a horizontal writing direction.

`"rl"`

Represents a vertical writing direction growing to the left.

`"lr"`

Represents a vertical writing direction growing to the right.

Examples
--------

In the following example a new `VTTCue` is created, then the value of `vertical` is set to `"rl"`. The value is then printed to the console.


```js
let video = document.querySelector("video");
let track = video.addTextTrack("captions", "Captions", "en");
track.mode = "showing";

let cue1 = new VTTCue(0, 0.9, "Hildy!");
cue1.vertical = "rl";
console.log(cue1.vertical);

track.addCue(cue1);
```

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

| Specification |
| --- |
| WebVTT: The Web Video Text Tracks Format # dom-vttcue-vertical |

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

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