Flowplayer-Subtitle

SOURCE URL: https://flowplayer.org/docs/subtitles.html

Setting up

Subtitles are loaded with a <track> element as follows

<div class="flowplayer">
   <video>
      <source type="video/webm" src="http://mydomain.com/my-video.webm">
      <source type="video/mp4" src="http://mydomain.com/my-video.mp4">
      <source type="video/ogg" src="http://mydomain.com/my-video.ogv">
 
      <!-- the track element -->
      <track src="/path/to/my-subtitles-en.vtt">
 
   </video>
</div>

The WEBVTT file of the track element has the following structure:

WEBVTT FILE
 
1
00:00:01.000 --> 00:00:04.000
The first subtitle from 1 seconds to 4 seconds
This is a second line
And a third one
 
2
00:00:05.000 --> 00:00:06.000
<b>Bold</b>, <i>italic</i> and <u>underlines</u> are supported
 
...

A sample file. Understanding the VTT file format.

Note: Subtitles must be loaded from a local path - unless they are served with a loose cross-origin policy with an appropriate Access-Control-Allow-Origin header. For instance, in an Apache configuration:

Header set Access-Control-Allow-Origin "*"

For more details look up cross-orgin resource sharing.

Custom looks

The first subtitle above would be rendered on the player as follows

<div class='fp-subtitle'>
   <p>The first subtitle from 1 seconds to 4 seconds</p><br>
   <p>This is a second line</p><br>
   <p>And a third one</p><br>
</div>

Flowplayer comes with a default look for the subtitles but here is how you can alter the looks with CSS

/ override default looks /
.flowplayer .fp-subtitle {
   font-size: 18px;
}
 
/ visible subtitle looks (.fp-active class) /
.flowplayer .fp-subtitle.fp-active { 
   opacity: 0.8;
}
 
/ custom looks for 7:th subtitle /
.flowplayer.cue6 .fp-subtitle p {
   font-size: 40px;
}

Native subtitles

Currently the <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

<div class="flowplayer" data-nativesubtitles="true">
   <video>
      <source type="video/webm" src="http://mydomain.com/my-video.webm">
      <source type="video/mp4" src="http://mydomain.com/my-video.mp4">
      <track src="/path/to/my-subtitles-en.vtt" default>
   </video>
</div>

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

if (flowplayer.support.subtitles) {
   // do your thing
}

JavaScript API

Internally flowplayer uses cuepoints to notify when subtitle starts and ends. Here is an example of how to capture subtitle events

player.bind("cuepoint", function(e, api, cuepoint) {
 
   var subtitle = cue.subtitle;
 
   // start a subtitle
   if (subtitle) {
 
   }
 
   // end the subtitle
   if (cuepoint.subtitleEnd) {
 
   }
 
});

The subtitle object has following properties title, startTime, endTime and text. An API property subtitles is an array of all subtitles. For example

console.info(flowplayer().subtitles);

Known issues and limitations

Flowplayer does not add any UI element for controlling subtitles. If the <track> element 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.

Currently subtitles are not supported in playlists and are omitted when the player is embedded.