Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add HTMLMediaElement.addTextTrack() #36100

Merged
merged 13 commits into from
Sep 30, 2024
65 changes: 65 additions & 0 deletions files/en-us/web/api/htmlmediaelement/addtexttrack/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
---
title: "HTMLMediaElement: addTextTrack() method"
gusborg88 marked this conversation as resolved.
Show resolved Hide resolved
short-title: addTextTrack()
slug: Web/API/HTMLMediaElement/addTextTrack
page-type: web-api-instance-method
browser-compat: api.HTMLMediaElement.addTextTrack
---

gusborg88 marked this conversation as resolved.
Show resolved Hide resolved
{{APIRef("HTML DOM")}}

The {{domxref("HTMLMediaElement")}}
**`addTextTrack()`** method creates a new {{domxref("TextTrack")}} object, and adds it to the media element. It fires the {{domxref("addtrack")}} event. This method can't be used on a {{domxref("TextTrackList")}} interface, only a {{domxref("HTMLMediaElement")}}.
gusborg88 marked this conversation as resolved.
Show resolved Hide resolved

## Syntax
gusborg88 marked this conversation as resolved.
Show resolved Hide resolved

```js-nolint
addTextTrack(kind)
addTextTrack(kind, label)
addTextTrack(kind, label, language)
```

### Parameters
gusborg88 marked this conversation as resolved.
Show resolved Hide resolved

- `kind`
- : A string representing the {{domxref("TextTrack.kind")}} property (`subtitles`, `captions`, `descriptions`, `chapters`, or `metadata`).
- `label`
- : A string representing the {{domxref("TextTrack.label")}} property.
- `language`
- : A string representing the {{domxref("TextTrack.language")}} property.

### Return value
gusborg88 marked this conversation as resolved.
Show resolved Hide resolved

A {{domxref("TextTrackList")}} representing the {{domxref("HTMLMediaElement.textTracks")}} property, with the newly created `TextTrack` object inserted.
gusborg88 marked this conversation as resolved.
Show resolved Hide resolved

### Exceptions
gusborg88 marked this conversation as resolved.
Show resolved Hide resolved

None.

## Examples
gusborg88 marked this conversation as resolved.
Show resolved Hide resolved

This example adds a new {{domxref("TextTrack")}} with the `kind` set to `"subtitles"`, and adds a new {{domxref("VTTCue")}} to that.

```js
const video = document.querySelector("video");
video.addTextTrack("subtitles");
video.textTracks[0].addCue(new VTTCue(3, 6, "Hello world!"));
console.log(voices.textTracks[2].cues[0].text);
gusborg88 marked this conversation as resolved.
Show resolved Hide resolved
// "Hello world!"
```

## Specifications
gusborg88 marked this conversation as resolved.
Show resolved Hide resolved

{{Specifications}}

## Browser compatibility
gusborg88 marked this conversation as resolved.
Show resolved Hide resolved

{{Compat}}

## See also
gusborg88 marked this conversation as resolved.
Show resolved Hide resolved

- {{domxref("TextTrack")}}
- [WebVTT API](/en-US/docs/Web/API/WebVTT_API)
- [Web media technologies](/en-US/docs/Web/Media)
- Learning: [Video and audio content](/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content)
- [Using the Web Audio API](/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API)