Subtitles

Subtitles are text derived from either a transcript or screenplay of the dialog or commentary in films, television programs, video games, and the like, usually displayed at the bottom of the screen. Below is an example video showing the subtitles.

VTT format

WEBVTT

1
00:00:15.000 --> 00:00:18.000 align:start
At the left we can see...

2
00:00:18.167 --> 00:00:20.083 align:middle
At the right we can see the...

3
00:00:20.083 --> 00:00:22.000
...the head-snarlers

4
00:00:22.000 --> 00:00:24.417 align:end
Everything is safe. Perfectly safe.

5
00:00:24.583 --> 00:00:27.083
Emo?

Adding to Fluid Player

To configure Fluid Player to use your VTT file, you can set is as the optional parameter subtitlesEnabled under layoutControls.

Provide subtitles url in track tags under kind='metadata'

Please make sure that you do not specify as kind='subtitles', because that doesn't work in some browsers.

<video id="my-video" controls>
    <source src="video.mp4" type="video/mp4"/>
    <track label="English" kind="metadata" srclang="en" src="/subtitles/english.vtt" default>
    <track label="Deutsch" kind="metadata" srclang="de" src="/subtitles/deutsch.vtt">
</video>

<script type="application/javascript">
fluidPlayer(
    'my-video',
    {
        layoutControls: {
            subtitlesEnabled: true
        }
    }
);
</script>

subtitlesOnByDefault

Set this parameter to true to have subtitles on by default. This parameter is by default already set to true.

fluidPlayer(
    'my-video',
    {
        layoutControls: {
            subtitlesOnByDefault: false, // Default true
        }
    }
);

Font Size Options

Fluid Player supports subtitle font size controls, enhancing accessibility and viewer experience by allowing text size adjustments. Users can customize subtitle size in two convenient ways:

Method 1: Keyboard Shortcuts

While viewing content, users can quickly adjust subtitle size using simple keyboard shortcuts:

• Press the + key to increase subtitle font size
• Press the - key to decrease subtitle font size

Method 2: Font Size Submenu

A dedicated Font Size submenu is available in the subtitles/captions control panel. This menu provides precise control with predefined percentage options:

• 50%
• 75%
• 100% (Default)
• 150%
• 200%