
Developers
Player plugins
Developers
Player plugins
Allows display of stylable WebVTT subtitles in the player
IE11 does not implemented the necessary VTTCue interfaces, it will not error, but subtitles will not show. You probably don't need IE support
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-html.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. If set, this track will be on at 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 }
]}
}
]
})
The HTML consists of three main components:
<div>
with the class .fp-captions
<pre>
with the class .fp-cue
VTTCue
which is dependent on the browser's implementation of getCueAsHTML()
This is a raw HTML example:
<div class="fp-captions">
<pre class="fp-cue">
Todo mundo quer mais da vida ..
Esta é uma segunda linha
E um terceiro
</pre>
</div>
Live streaming
Live analytics
Ad scheduling
Monetization