HTML Subtitles
The HTML Subtitles plugin allows the display of styled WebVTT subtitles in Wowza Flowplayer.
Installation
Include the plugin next to the core player:
<script src="//cdn.flowplayer.com/releases/native/3/stable/flowplayer.min.js"></script>
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/subtitles.min.js"></script>
<!-- load playlist plugin if you need subtitles in playlists
<script src="//cdn.flowplayer.com/releases/native/3/stable/3/plugins/playlist.min.js"></script>
-->
Supported formats
This 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.
Info
- 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.
Configuration
Subtitles are configured in the src
(for playlists) or player level object subtitles
and the child object tracks
which can contain multiple subtitle tracks in different languages.
Subtitle options
Option | Description |
---|---|
native boolean |
Default value is false . Required only if using WebVTT inline styles. When set to true , enables native rendering of subtitles by the browser. Helpful when injecting CSS rules or defining subtitle styles directly in WebVTT files. |
show boolean |
Disables existing subtitles with subtitles: {show: false} . |
tracks array |
Required for side-loaded WebVTT files. Contains one or multiple track source objects with the properties from the Track options table. |
Track options
Option | Description |
---|---|
crossorigin string |
Adds a crossorigin attribute to the |
default boolean |
Defines which track to show as default, one per tracks: array. If set, this track will be on at player start. |
id string |
ID of the subtitle. |
kind string |
Possible options include captions , subtitles , descriptions . |
label string |
Required. Label to show in the menu. |
lang string |
Language of the subtitle (2 letter BCP47 code). |
src string |
Required. WebVTT file url. |
Sample code
Sample code single clip player
var 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" }
]}
})
Sample code playlist
This code sample 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 }
]}
}
]
})
API
Subtitles API events
event | description | data |
---|---|---|
flowplayer.subtitles.events.TRACK_UPDATED v3.4.1 |
emitted when a different track is selected from the menu and loaded by the player | the textTrack which was selected. Empty if subtitles are disabled in the menu. |
Subtitles menu events
There are two additional events which are bound to the subtitles menu Web component and emitted when new text tracks are added to the menu or selected.
Please see Web components subtitle events for the events.
Generated HTML
The HTML consists of three main components:
-
An external wrapper
<div>
with the class.fp-captions
. -
An internal
<pre>
with the class.fp-cue
. -
The html from the
VTTCue
which is dependent on the browser's implementation ofgetCueAsHTML()
.
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>
You could style the subtitles with a bit of CSS:
/* make the subtitles bigger, fonts full black on a white background */
.fp-captions .fp-cue {font-size: 2em; color: black; background-color: white;}
Links
Below is a list of useful resources to learn about, create, convert, and manage WebVTT subtitles.
Specifications and documentation
- http://edutechwiki.unige.ch/en/WebVTT
- http://html5doctor.com/video-subtitling-and-webvtt/
- https://dvcs.w3.org/hg/text-tracks/raw-file/default/608toVTT/608toVTT.html
- https://dcmp.org/learn/213#CiY_resources
- BCP47 language codes
Validator and converter tools
- Online WebVTT validator
- Javascript validator tool (source code)
- Subtitles tools commercial site
- desktop srt converter tool - cli (source code and win/Mac binaries)
- desktop srt converter tool - Windows GUI
- Windows subtitle editor (source code)
- EIA-608 to WebVTT Ruby Gem (source code)