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:

Copy

Copied

<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 element. Possible values: `use-credentials`, `anonymous`.
`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

Copy

Copied

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.

Copy

Copied

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 of getCueAsHTML() .

This is a raw HTML example:

Copy

Copied

<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:

Copy

Copied

/* make the subtitles bigger, fonts full black on a white background */
.fp-captions .fp-cue {font-size: 2em; color: black; background-color: white;}

HTML Subtitles

Installation

Supported formats

Info

Configuration

Subtitle options

Track options

Sample code

Sample code single clip player

Sample code playlist

API

Subtitles API events

Subtitles menu events

Generated HTML

Links

Specifications and documentation

Validator and converter tools