This player uses a HTML5
<track> element to display subtitles on all browsers
Subtitles are loaded with a
<track> element as follows
The WEBVTT file of the track element has the following structure:
Note: Subtitles must be loaded from a local path - unless they are served with
a loose cross-origin policy with an appropriate
header. For instance, in an Apache configuration:
For more details look up cross-orgin resource sharing.
The first subtitle above would be rendered on the player as follows
Flowplayer comes with a default look for the subtitles but here is how you can alter the looks with CSS
<track> element is supported natively in following browsers
- IE 10 (since November 2011)
- Google Chrome 18 (since November 2011)
- Safari 6 (July 2012)
- Opera 12.5 (August 2012)
You can enable native support with
nativesubtitles configuration variable and by adding
default attribute to your
track element. For example
After this subtitle looks are browser dependent and you lose the CSS customization possibilities.
Native support is present when
flowplayer.support.subtitles is true. For example
Internally flowplayer uses cuepoints to notify when subtitle starts and ends. Here is an example of how to capture subtitle events
The subtitle object has following properties
An API property
subtitles is an array of all subtitles. For example
Known issues and limitations
Flowplayer does not add any UI element for controlling subtitles. If the
is provided subtitles are enabled and cannot be removed by the user. You also need to
control the language of the subtitles on your web application. User cannot switch the
language from the player.
Flowplayer does not support VTT extra definitions such as text alignment and line position. Style is completely controlled with CSS for full cross browser support.
When using the
default attribute on the
track element some browsers may show their
native controlbar for a short glimpse of time.