# How to insert subtitles on Web

This article describes how you can side-load subtitles or closed captions, i.e. how you can add text tracks which are not part of your HLS or MPEG-DASH manifest.

Every source description has a text tracks property, which accepts an array of side-loaded text tracks. All valid tracks are available for playback as long as the player's source is not set again.

Text track descriptions can also be used for other purposes, e.g. for including preview thumbnails and chapters.

## Usage

Each text track is described by a [`TextTrackDescription`](https://docs-preview.optiview.dolby.com/pr-863/theoplayer/v11/api-reference/web/interfaces/TextTrackDescription).

```js
player.source = {
  sources: [
    {
      src: '//path/to/your-manifest.m3u8',
      type: 'application/x-mpegurl',
    },
  ],
  textTracks: [
    {
      default: true, // optional
      kind: 'subtitles', // optional
      label: 'English subs', // optional - this appears in your UI
      src: 'path/to/your-subs-track1.vtt',
      srclang: 'en',
    },
  ],
};
```

## Subtitle styling

To style your subtitles, look into the player's [`textTrackStyle`](https://docs-preview.optiview.dolby.com/pr-863/theoplayer/v11/api-reference/web/interfaces/TextTrackStyle) property.

## Related articles

* [How to dynamically change the visible captions](https://docs-preview.optiview.dolby.com/pr-863/theoplayer/how-to-guides/web/text-tracks/change-visible-captions.md)
* [How to programmatically enable or disable text tracks](https://docs-preview.optiview.dolby.com/pr-863/theoplayer/how-to-guides/web/text-tracks/enable-disable-text-tracks.md)
* [How to implement preview thumbnails](https://docs-preview.optiview.dolby.com/pr-863/theoplayer/how-to-guides/web/text-tracks/preview-thumbnails.md)