
Developers
Player plugins
Developers
Player plugins
Allows display of WebVTT subtitles in the player
Include the plugin next to the core player:
<script src="//cdn.flowplayer.com/releases/native/stable/flowplayer.min.js"></script>
<script src="//cdn.flowplayer.com/releases/native/stable/plugins/subtitles.min.js"></script>
<!-- load playlist plugin if you need subtitles in playlists
<script src="//cdn.flowplayer.com/releases/native/stable/plugins/playlist.min.js"></script>
-->
Create a custom player with subtitles on the configuration builder
Player and plugins exist in different release versions. Please see the release channel documentation.
The plugin supports webVTT text track files as well as embedded WebVTT in an HLS m3u8 manifest, plus CEA-608/708 and SCTE embedded captions. For all embedded types you do not need to configure the tracks
object; all configuration comes from the stream. This also means you cannot override the label or default.
Support for embedded captions in native HLS implementations may vary.
SRT subtitles are not officially supported by the html5 <video>
standard. Please use one of the converters listed in the links section to convert to WebVTT.
Subtitles are configured in the clip (for playlists) or player level object subtitles
and the child object tracks
, which can contain multiple subtitle tracks in different languages.
subtitles
configurationsubtitles: false
tracks
arraytracks
configurationcrossorigin
stringcrossorigin
attribute to the default
booleantracks:
array (is_default
is kept for backwards compatibility). If present, the subtitle will be shown on player start.id
stringkind
stringcaptions
, subtitles
, descriptions
label
stringlang
stringsrc
stringvar player = flowplayer('#container',
{ src : "//edge.flowplayer.org/bauhaus.m3u8"
, subtitles:
{ tracks:
[
{ src: "//yourserver.com/subtitles-demo-en.vtt"
, label: "English"
, id: "English-en"
, default: true
, crossorigin: "anonymous" }
, { src: "//yourserver.com/subtitles-demo-fr.vtt"
, label: "Francais"
, id: "Francais-fr"
, default : false
, crossorigin: "anonymous" }
]}
})
Requires loading the playlist plugin
var player = flowplayer.playlist('#container', {
playlist: [
{ src: "//edge.flowplayer.org/bauhaus.mp4"
, title: "Bauhaus"
, subtitles:
{ tracks:
[
{ src: "//yourserver.com/bauhaus-en.vtt"
, label: "English"
, default: true }
, { src: "//yourserver.com/bauhaus-fr.vtt"
, label: "Francais"
, default : false }
]}
}
, { src: "//edge.flowplayer.org/functional.mp4"
, title: "Functional",
, subtitles:
{ tracks:
[
{ src: "//yourserver.com/functional-en.vtt"
, label: "English"
, default: true }
, { src: "//yourserver.com/functional-fr.vtt"
, label: "Francais"
, default : false }
]}
}
]
})
tracks
property hold the array of track sources. Previous releases used src
is_default
parameter has been renamed to default
VTT files must be served on a loose cross-origin policy (CORS) with an appropriate Access-Control-Allow-Origin header if they are loaded from a different domain, even a different sub domain.
For instance, in an Apache configuration:
Header set Access-Control-Allow-Origin "*"
For more details look up cross-orgin resource sharing.
It is recommended to serve VTT files with a mime type of text/vtt
.
Live streaming
Live analytics
Ad scheduling
Monetization