New pages: HTMLTrackElement API properties (#36913)

files/en-us/web/api/htmltrackelement/default/index.md

@@ -0,0 +1,36 @@
+---
+title: "HTMLTrackElement: default property"
+short-title: default
+slug: Web/API/HTMLTrackElement/default
+page-type: web-api-instance-property
+browser-compat: api.HTMLTrackElement.default
+---
+
+{{ApiRef("HTML DOM")}}
+
+The **`default`** property of the {{domxref("HTMLTrackElement")}} interface represents whether the track will be enabled if the user's preferences do not indicate that another track would be more appropriate. It reflects the {{htmlelement("track")}} element's boolean [`default`](/en-US/docs/Web/HTML/Element/track#default) attribute, returning `true` if present and `false` otherwise.
+
+## Value
+
+A Boolean.
+
+## Example
+
+```js
+const trackElement = document.getElementById("exampleTrack");
+console.log(trackElement.default);
+trackElement.default = true;
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("HTMLTrackElement.kind")}}
+- {{domxref("HTMLTrackElement.label")}}

files/en-us/web/api/htmltrackelement/kind/index.md

@@ -0,0 +1,52 @@
+---
+title: "HTMLTrackElement: kind property"
+short-title: kind
+slug: Web/API/HTMLTrackElement/kind
+page-type: web-api-instance-property
+browser-compat: api.HTMLTrackElement.kind
+---
+
+{{ApiRef("HTML DOM")}}
+
+The **`kind`** property of the {{domxref("HTMLTrackElement")}} interface represents the type of track, or how the text track is meant to be used. It reflects the {{htmlelement("track")}} element's enumerated [`kind`](/en-US/docs/Web/HTML/Element/track#kind) attribute.
+
+If no `kind` is set, `subtitles` is used. If the attribute is not set to one of the valid enumerated values, it is invalid and `metadata` is used. Other valid values include `captions`, `descriptions`, and `chapters`.
+
+## Value
+
+A string; lowercase `captions`, `descriptions`, `chapters`, `subtitles` or `metadata`.
+
+## Example
+
+Given the following:
+
+```html
+<track src="track.vtt" id="exampleTrack" />
+```
+
+We get the following results:
+
+```js
+const trackElement = document.getElementById("exampleTrack");
+// missing value
+console.log(trackElement.kind); // "subtitles"
+trackElement.kind = "INVALID";
+// invalid value
+console.log(trackElement.kind); // "metadata"
+trackElement.kind = "CAPTIONS";
+// valid value
+console.log(trackElement.kind); // "captions"
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("HTMLTrackElement.track")}}
+- {{domxref("HTMLTrackElement.label")}}

files/en-us/web/api/htmltrackelement/label/index.md

@@ -0,0 +1,36 @@
+---
+title: "HTMLTrackElement: label property"
+short-title: label
+slug: Web/API/HTMLTrackElement/label
+page-type: web-api-instance-property
+browser-compat: api.HTMLTrackElement.label
+---
+
+{{ApiRef("HTML DOM")}}
+
+The **`label`** property of the {{domxref("HTMLTrackElement")}} represents the user-readable title displayed when listing subtitle, caption, and audio descriptions for a track. It reflects the {{htmlelement("track")}} element's [`label`](/en-US/docs/Web/HTML/Element/track#label) attribute.
+
+## Value
+
+A string.
+
+## Example
+
+```js
+const trackElement = document.getElementById("exampleTrack");
+console.log(`Track's label: ${trackElement.label}`);
+trackElement.label = "Updated label";
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("HTMLTrackElement.track")}}
+- {{domxref("HTMLTrackElement.kind")}}

files/en-us/web/api/htmltrackelement/readystate/index.md

@@ -0,0 +1,41 @@
+---
+title: "HTMLTrackElement: readyState property"
+short-title: readyState
+slug: Web/API/HTMLTrackElement/readyState
+page-type: web-api-instance-property
+browser-compat: api.HTMLTrackElement.readyState
+---
+
+{{APIRef("HTML DOM")}}
+
+The readonly **`readyState`** property of the {{domxref("HTMLTrackElement")}} interface returns a number representing the {{HTMLElement("track")}} element's text track readiness state:
+
+0. NONE: The text track not loaded state.
+1. LOADING: The text track loading state.
+2. LOADED: The text track loaded state.
+3. ERROR: The text track failed to load state.
+
+## Value
+
+A number; `0`, `1`, `2`, or `3`.
+
+## Example
+
+```js
+const trackElement = document.getElementById("exampleTrack");
+console.log(trackElement.readyState); // 0, 1, 2, or 3
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("HTMLTrackElement")}}
+- {{domxref("HTMLMediaElement.readyState")}}
+- {{HTMLElement("track")}}

files/en-us/web/api/htmltrackelement/src/index.md

@@ -8,7 +8,7 @@ browser-compat: api.HTMLTrackElement.src
 
 {{APIRef("HTML DOM")}}
 
-The **`HTMLTrackElement.src`** property reflects the value of
+The **`src`** property of the {{domxref("HTMLTrackElement")}} interface reflects the value of
 the {{HTMLElement("track")}} element's [`src`](/en-US/docs/Web/HTML/Element/track#src) attribute, which
 indicates the URL of the text track's data.
 
@@ -19,7 +19,9 @@ A string containing the URL of the text track data.
 ## Example
 
 ```js
-// coming soon
+const trackElement = document.getElementById("exampleTrack");
+console.log(`Track's URL: ${trackElement.src}`);
+trackElement.src = "newTrack.vtt";
 ```
 
 ## Specifications
@@ -32,5 +34,5 @@ A string containing the URL of the text track data.
 
 ## See also
 
-- {{domxref("HTMLTrackElement")}}: Interface used to define the `HTMLTrackElement.src` property
+- {{domxref("HTMLTrackElement")}}
 - {{HTMLElement("track")}}

files/en-us/web/api/htmltrackelement/srclang/index.md

@@ -0,0 +1,41 @@
+---
+title: "HTMLTrackElement: srclang property"
+short-title: srclang
+slug: Web/API/HTMLTrackElement/srclang
+page-type: web-api-instance-property
+browser-compat: api.HTMLTrackElement.srclang
+---
+
+{{APIRef("HTML DOM")}}
+
+The **`srclang`** property of the {{domxref("HTMLTrackElement")}} interface reflects the value of
+the {{HTMLElement("track")}} element's [`srclang`](/en-US/docs/Web/HTML/Element/track#srclang) attribute or the empty string if not defined.
+
+The `srclang` attribute is a [BCP 47 language tag](/en-US/docs/Web/HTML/Global_attributes/lang#language_tag_syntax)
+indicating the language of the text track's data.
+
+## Value
+
+A string.
+
+## Example
+
+```js
+const trackElement = document.getElementById("exampleTrack");
+console.log(`Track's language: ${trackElement.srclang}`);
+trackElement.srclang = "en-US";
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("HTMLTrackElement")}}
+- {{HTMLElement("track")}}
+- [`lang` syntax](/en-US/docs/Web/HTML/Global_attributes/lang#language_tag_syntax)

files/en-us/web/api/htmltrackelement/track/index.md

@@ -0,0 +1,36 @@
+---
+title: "HTMLTrackElement: track property"
+short-title: track
+slug: Web/API/HTMLTrackElement/track
+page-type: web-api-instance-property
+browser-compat: api.HTMLTrackElement.track
+---
+
+{{APIRef("HTML DOM")}}
+
+The readonly **`track`** property of the {{domxref("HTMLTrackElement")}} interface returns a {{DOMxRef("TextTrack")}} object corresponding to the text track of the {{HTMLElement("track")}} element.
+
+## Value
+
+A {{DOMxRef("TextTrack")}} object.
+
+## Example
+
+```js
+const trackElement = document.getElementById("exampleTrack");
+console.dir(trackElement.track);
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("HTMLTrackElement")}}
+- {{domxref("textTrack")}}
+- {{HTMLElement("track")}}