# Dynamic loading of subtitle

**URL:** <https://community.bitmovin.com/t/dynamic-loading-of-subtitle/2080>\
**Category:** Support\
**Tags:** web\
**Created:** [June 22, 2023, 8:51am UTC](https://community.bitmovin.com/t/dynamic-loading-of-subtitle/2080 "2023-06-22T08:51:59Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![fabre.lambeau1](https://sea1.discourse-cdn.com/flex015/user_avatar/community.bitmovin.com/fabre.lambeau1/32/519_2.png) [@fabre.lambeau1](https://community.bitmovin.com/u/fabre.lambeau1)\
**Post date:** [June 22, 2023, 8:51am UTC](https://community.bitmovin.com/t/dynamic-loading-of-subtitle/2080/1 "2023-06-22T08:51:59Z")

</div>

Hi Bitmovin,

With the web player, is there a way of dynamically loading a new subtitle or thumbnail track _after_ the source has been loaded (ie. not provided as part of the [source configuration](https://cdn.bitmovin.com/player/web/8/docs/interfaces/core_config.sourceconfig.html))?  
This is for a slightly unusual use case where those tracks would be generated by code, depending on metadata only available in the player after the source as loaded.

---

<div class="post-metadata">

**Author:** ![thomas.huertas](https://sea1.discourse-cdn.com/flex015/user_avatar/community.bitmovin.com/thomas.huertas/32/291_2.png) [@thomas.huertas](https://community.bitmovin.com/u/thomas.huertas)\
**Post date:** [June 22, 2023, 6:42pm UTC](https://community.bitmovin.com/t/dynamic-loading-of-subtitle/2080/2 "2023-06-22T18:42:56Z")

</div>

Hello Fabre!

thanks for your question. Side loaded Thumbnail tracks are only configurable in the **source configuration** , so they need to be provided before the source is loaded. Thumbnail information can be retrieved after loaded/ready events.  
Do you use Bitmovin UI?  
Bitmovin UI makes usage of the Player’s [getThumbnail](https://cdn.bitmovin.com/player/web/8/docs/interfaces/core.playerapi.html#getthumbnail) API to obtain thumbnail information.  
Customisation on the UI side might be an approach to accomplish your use case, but you would need to handle the logic for getting the thumbnail information.  
**For reference:** [bitmovin-player-ui/src/ts/components/seekbarlabel.ts at develop · bitmovin/bitmovin-player-ui · GitHub](https://github.com/bitmovin/bitmovin-player-ui/blob/develop/src/ts/components/seekbarlabel.ts)

- [getThumbnail()](https://github.com/bitmovin/bitmovin-player-ui/blob/develop/src/ts/components/seekbarlabel.ts#L105) used for getting Thumbnail information from player.
- [ImageLoader](https://github.com/bitmovin/bitmovin-player-ui/blob/b0db7528491457f46e3ff360381223d4c225e808/src/ts/imageloader.ts) class used to download thumbnail images/sprites.

As per the subtitles, yes they can be added dynamically after the source load. Th following code will be needed:

```auto
player.subtitles.add({
            url: 'https://bitmovin-a.akamaihd.net/content/sintel/hls/subtitles_en.vtt',
            id: 'english_sintel',
            kind: 'subtitle',
            label: 'En',
            lang: 'english',
            enabled: true
        });

```

---

<div class="post-metadata">

**Author:** ![fabre.lambeau](https://sea1.discourse-cdn.com/flex015/user_avatar/community.bitmovin.com/fabre.lambeau/32/734_2.png) [@fabre.lambeau](https://community.bitmovin.com/u/fabre.lambeau)\
**Post date:** [June 23, 2023, 9:50am UTC](https://community.bitmovin.com/t/dynamic-loading-of-subtitle/2080/3 "2023-06-23T09:50:17Z")

</div>

Thanks Thomas,

For the subtitle case, can I assume that the player will automatically synchronize the subtitle track (ie. Seek into it) after it’s loaded, to keep it in sync with video/audio timeline?

---

<div class="post-metadata">

**Author:** ![daniel](https://sea1.discourse-cdn.com/flex015/user_avatar/community.bitmovin.com/daniel/32/121_2.png) [@daniel](https://community.bitmovin.com/u/daniel)\
**Post date:** [June 27, 2023, 10:54am UTC](https://community.bitmovin.com/t/dynamic-loading-of-subtitle/2080/4 "2023-06-27T10:54:14Z")

</div>

Yes correct @fabre.lambeau, the player will handle the synchronization 👍