How to use the Subtitles Module in Playground – uStudio

Subtitles help ensure that your video's message can be comprehended by all audiences regardless of language.

Videos distributed using uStudio's HTML5 players can be configured to display foreign language subtitles to your audience members.

STUDIO CONFIGURATION

Contact uStudio Support (support@ustudio.com) if you would like assistance with the following setup in your studio:

If you'd rather use the administrative interface to control player subtitles (vs. our APIs), then request uStudio's Playground Player Builder be enabled in your studio.
You'll also need the Subtitles Theme and Module provisioned for your studio, so request them if you don't already have them.
If you'd like uStudio to automatically generate your English-language transcripts (which include timestamps and are created in the necessary WebVTT format), make sure you have a license for this feature, or request a Free Trial.
And finally, you'll need a custom metadata field with the type "file" created in your studio for each language you want to offer. The unique ID for each of these fields must follows the format “[two-letter code]_subtitles”, e.g. “es_subtitles” for Spanish, as in the JSON sample below.
```
{
“uid”: “es_subtitles”, 
“type_uid”: “file”,
“label”: “Spanish Subtitles”, 
“public”: true,
“hidden”: false,
"options": {}
}
```

SUBTITLE AND VIDEO PREPARATION

However you generate the English and foreign-language WebVTT files, you'll need to associate them with your video by uploading each file to its corresponding file metadata field. Only language metadata fields with files uploaded to them will appear as options in the subtitles menu. For instance, if the file metadata field for French is empty, French will not be an option in the language-selection menu.

SUBTITLE PLAYER CONFIGURATION

Once you have a video with subtitles saved as metadata, you can work on the player. Your player needs BOTH the Subtitle Theme and the Subtitle Module for subtitles to be available (whether they are added via Playground or the API).

The player can be configured such that subtitles automatically appear in a desired language when the viewer begins playback. There are two ways to do this:

You can configure the player's default behavior by configuring the subtitle module via Playground or the API. This will affect all videos using that player.
You can specify preferred behavior by adding query parameters to the player embed code. This will only affect embed codes that use the query parameters. The embed code should be formatted as follows:

https://embed.ustudio.com/embed/[Destination UID]/[Video UID]?lang=es&subtitles=true

If you prefer to configure the module at the player level, there are 2 settings:

Enter the 2-letter code of the language to which the module should default, and
Set the player to automatically display (or not display) subtitles upon clicking play

Because there are 13 expected permutations of how the module will behave (depending on what subtitle files you've provided, and how you've configured the 2 settings above), we've created a separate knowledge article just for this topic: "What to expect from your Subtitle Player"