Table of contents
Adding chapters and subtitles
Flowplayer supports the display of chapters and multiple subtitles / captions in the WebVTT format. Flowplayer cloud embeds will automatically display the chapters and offer the subtitle option/menu once you've created them for the video.
 |
 |
|---|---|
Chapters |
Subtitles |
Using the VTT editor
Jump to:
Overview
Both chapters and subtitles for a video are managed using the VTT editor. Click the Edit chapters and subtitles button below the video preview to open the VTT editor.
The editor has the following components:
- Chapter/text cue form
- Video preview player
- Track headers
- Timeline with tracks
- Track actions
- Zoom and focus controls
When first opening the editor, you will see the video preview player and the chapters track. If the video already has some subtitle tracks, you will also see those below the chapters track. These tracks are laid out on a horizontal timeline representing the duration of the video. The vertical orange line on the timeline is the cursor, which represents the current position of the video preview playback. Clicking anywhere on the timeline will move the cursor to that position. If you want to move the timeline cursor to the start time of a chapter/text cue, simply double-click on it.
Since the timeline encompasses the entire duration of the video, you might find that you need to zoom in on parts of the timeline for more precise control. There are several different ways to do this. First, using the zoom and focus controls located directly below the timeline.
With these controls you can:
- Zoom in on the timeline
- Zoom out on the timeline
- Zoom and focus on the currently selected chapter/text cue
- Zoom out completely to show the full timeline
- Scroll timeline to put the cursor in view
These functions also have associated keyboard shortcuts.
Press K on your keyboard to see a complete list of available keyboard shortcuts in the editor.
Below the controls, you see a bar that represents the currently visible part of the timeline. Using the handles, you can resize this bar which consequently zooms in and out on the corresponding part of the timeline. You can also drag this bar around to focus on the corresponding part of the timeline.
While moving the bar left and right with your pointer to change the focus of the timeline, you can simultaneously move your pointer up to zoom in or down to zoom out
You can also zoom in by holding the Alt key and click anywhere on the timeline.
Holding the Alt and Shift keys while clicking on the timeline zooms out.
Lastly, you can zoom in using the timeline ruler. By clicking and holding the mouse button on a point on the ruler,
then moving the mouse pointer, you "draw" a box on the ruler.
When you release the mouse button, the timeline will zoom in on the corresponding region.
You can customize certain aspects of the editor to your own preferences.
Click on 
in the upper right corner to access the editor preferences.
These preferences are device/browser specific. In other words, your editor customization will not follow along if you log in on another device or browser.
Adding chapters
If you already have a .vtt file with chapters, you can import that by clicking on
in the Chapters header. This will replace any existing chapters.
Adding chapters manually can be done in two ways. The first is by clicking on
in the Chapters header, which will add a new chapter
at the timeline cursor's current position.
The second method is to double-click on an empty portion of the chapters track, which will add a chapter at
the corresponding position (in practice, this can only be done on an empty chapters track or before the first chapter).
Chapters are shown on the track as blue boxes. Click on a chapter to select it. When a chapter is selected, its details are shown in the chapters form. This is where you edit the chapter's title and start time. It is also where you can delete the chapter. A chapter's start time can also be changed by resizing the box with the mouse pointer.
NOTE: Unlike subtitle text cues, a chapter does not have an end point. Each chapter extends to the next chapter's start time or, if it's the last chapter, to the end of the video. The last chapter will always end at the end of the video but the first chapter does not have to start at the start of the video.
Adding subtitles
To add a new subtitle track, click on 
to create a new,
empty track or in the Subtitles header to import
a subtitle track from an existing .vtt file.
In a subtitle track's header (the part to the left of the timeline), you can enter a label for the track and select
its language. The label is what will be displayed in the CC menu in the player. If you leave the field empty,
the native name of the language you select will be used.
Creating a new text cue can be done using any of the following methods:
- Click on in the track header. This adds a 5 second long cue that starts
at the timeline cursor's current position. Cues cannot overlap, so if a text cue already spans across this point,
it will be cut off and have its end point set to the same position as the new cue's starting point.
- Double-click on an empty part of the track. This adds a 5 second long cue that starts at the clicked position.
- Click and hold the mouse button on an empty part of the track, then move the pointer left or right to "draw" a box on the timeline. When you release the mouse button, a new cue that corresponds to the drawn box is created.
Like chapters, text cues are shown as colored boxes on the track. Click on a cue to select it. When a cue is selected,
its details are shown in the cue form. This is where you edit the cue's text content, starting point and end point.
It's also where you can delete the cue.
A cue's starting point and end point can also be changed by resizing the box on the timeline. Drag its left edge
to change the starting point and its right edge to change the end point. The timeline cursor will follow as you move
an edge so that you can see in the preview player that you find the correct point in the video.
In addition to the methods mentioned earlier, you can also create another subtitle track by duplicating an existing one.
This is done by clicking on 
to the right of the track.
This is useful if you have a track with all the cues and timings set up and need to create an identical track
but for a different language.
Single track mode
If you're only working on a single track, e.g. the chapters, or have many subtitle tracks and want to reduce clutter while working on any one of them, etc, you might find the single track mode to be a better and more productive experience. In this mode, only one track will be displayed at a time. The timeline utilizes the full width of the editor and the chapters/text cues are bigger.
You can click on 
to the right of the track to directly
switch to single track mode with that track.
NOTE: When working on a subtitle track in single track mode, importing from a .vtt file works a bit differently from
multi track mode. Instead of adding a new track, it replaces all the text cues in the track you're currently working on.
Managing subtitles in the files list
The subtitles for a video are listed in the video's files list, which is access by clicking the Manage files button below the video preview.
Here you can upload new subtitle track files and edit the properties of the subtitle tracks.
This is an alternative to using the VTT editor if you already have the subtitles in .vtt files.
Technical information
Please check these links for documentation and tools covering the WebVTT format.